> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# ProvidePlugin

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

## Examples

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

or

```js
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:

```js
import path from 'node:path';

new rspack.ProvidePlugin({
  identifier: path.resolve(path.join(import.meta.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.

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

the piece of code:

```js
console.log(process.version);
```

will be transformed behind the scenes to:

```js
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:

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

Then in any of our source code:

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

### Lodash map

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

### Vue.js

```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](https://webpack.js.org/plugins/provide-plugin/) under the [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), with modifications.