#ProvidePlugin

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

#Examples

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:

import path from 'node:path';
import { fileURLToPath } from 'node:url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

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.

#Using process in the browser

Enable process object support within a browser context.

new rspack.ProvidePlugin({
  process: ['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'],
});

#Options

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

Maps each identifier to the module that provides it.

• String form: Specifies the module specifier to load. The provided identifier is assigned the value returned by loading that module, such as a CommonJS module's module.exports or an ES module namespace object.
• Array form: The first item is the module specifier, and the remaining items form a property path into the value returned by loading that module. To provide the default export of an ES module, use [moduleSpecifier, 'default'].

This page is adapted from webpack documentation under the CC BY 4.0, with modifications.