Skip to main content
The ProvidePlugin automatically loads modules instead of having to import or require them everywhere. When webpack encounters an identifier that matches a configured module, it automatically requires that module.

​
Usage

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      identifier: 'module',
      // or
      identifier: ['module', 'property']
    })
  ]
};

​
Configuration

​
definitions
Record<string, string | string[]>
required
Object mapping identifiers to modules. The value can be:
  • A module name (string)
  • An array with module name and property path

​
Examples

​
jQuery

Automatically load jQuery: 
new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})
Now you can use $ or jQuery anywhere without importing: 
// No import needed!
$('#app').show();

​
Lodash

Provide lodash utilities: 
new webpack.ProvidePlugin({
  _: 'lodash'
})
Usage: 
// No import needed!
const array = _.compact([0, 1, false, 2, '', 3]);

​
Specific Module Exports

Access specific exports from a module: 
new webpack.ProvidePlugin({
  map: ['lodash', 'map'],
  reduce: ['lodash', 'reduce']
})
Usage: 
// No import needed!
const result = map([1, 2, 3], n => n * 2);

​
React Without Import

new webpack.ProvidePlugin({
  React: 'react'
})
Now JSX works without importing React: 
// No React import needed!
function Component() {
  return <div>Hello World</div>;
}
With React 17+ and the new JSX transform, you don’t need this anymore as JSX no longer requires React to be in scope.

​
Process and Buffer (Node.js Polyfills)

new webpack.ProvidePlugin({
  process: 'process/browser',
  Buffer: ['buffer', 'Buffer']
})

​
Nested Properties

Access nested properties: 
new webpack.ProvidePlugin({
  'window.jQuery': 'jquery',
  'window.$': 'jquery'
})

​
Common Use Cases

​
Legacy Code Migration

When migrating legacy code that uses global variables: 
new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  _: 'lodash',
  moment: 'moment'
})

​
Testing Environment

Provide test utilities globally: 
new webpack.ProvidePlugin({
  expect: 'chai',
  sinon: 'sinon'
})

​
Consistent API

Ensure consistent API across modules: 
new webpack.ProvidePlugin({
  fetch: 'node-fetch',
  Promise: 'bluebird'
})

​
How It Works

The plugin works by:
  1. Scanning your code for free variables (identifiers used without being declared)
  2. When it finds a match with configured identifiers, it injects an import
  3. The import is added at the top of the module automatically
For example: 
// Your code
const result = map([1, 2, 3], n => n * 2);

// Becomes (automatically)
import { map } from 'lodash';
const result = map([1, 2, 3], n => n * 2);

​
Tree Shaking

ProvidePlugin may interfere with tree shaking. When possible, prefer explicit imports for better tree shaking.
// Better for tree shaking
import { map } from 'lodash-es';

// vs ProvidePlugin
new webpack.ProvidePlugin({ map: ['lodash', 'map'] })

​
Best Practices

  • Use ProvidePlugin sparingly, primarily for:
    • Migrating legacy code
    • Global utilities used everywhere
    • Polyfills and shims
  • Prefer explicit imports for better code clarity
  • Consider tree shaking implications