#ProvidePlugin

Automatically load modules instead of having to import or require them everywhere.

new rspack.ProvidePlugin({
  identifier: 'module1',
  // ...
});

or

new rspack.ProvidePlugin({
  identifier: ['module1', 'property1'],
  // ...
});

By default, module resolution path is current folder (./**) and node_modules.

It is also possible to specify full path:

const path = require('node:path');

new rspack.ProvidePlugin({
  identifier: path.resolve(path.join(__dirname, 'src/module1')),
  // ...
});

Whenever the identifier is encountered as free variable in a module, the module is loaded automatically and the identifier is filled with the exports of the loaded module (or property in order to support named exports).

For importing the default export of an ES2015 module, you have to specify the default property of module.

#Options

• Type: Record<string, string | string[]>

#Examples

#Using process in the browser

Enable process object support within a browser context.

new rspack.ProvidePlugin({
  process: [require.resolve('process/browser')],
});

the piece of code:

console.log(process.version);

will be transformed behind the scenes to:

import process from 'process/browser';
console.log(process.version);

#jQuery

To automatically load jquery we can point both variables it exposes to the corresponding node module:

new rspack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
});

Then in any of our source code:

// in a module
$('#item'); // <= works
jQuery('#item'); // <= also works
// $ is automatically set to the exports of module "jquery"

#Lodash map

new rspack.ProvidePlugin({
  _map: ['lodash', 'map'],
});

#Vue.js

new rspack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js', 'default'],
});