Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.webpack.js.org/llms.txt

Use this file to discover all available pages before exploring further.

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