How to Manage Global Variables in Webpack?

Approaches for Defining Global Variables in Webpack

1. Module Initialization

Webpack evaluates modules only once, allowing you to create a module like globals.js containing an object of global variables. You can import this module into other modules and modify or access its properties, maintaining global scope.

2. Webpack's ProvidePlugin

This plugin enables you to make a module available as a variable in any module where it is used. It simplifies code by eliminating repetitive import statements. To use the ProvidePlugin for your module (e.g., utils.js), alias the module in your webpack config and add it to the plugin like:

new webpack.ProvidePlugin({
  'utils': 'utils'
})

3. Webpack's DefinePlugin

Use this plugin to define global constants with string values:

new webpack.DefinePlugin({
  VERSION: JSON.stringify("5fa3b9"),
})

console.log("Running App version " + VERSION);

4. Global Object (window / global)

This approach allows global variable declaration directly in the browser (window.foo = 'bar') or in a Node.js environment (global.foo = 'bar'). It is commonly used for polyfills.

5. Package: dotenv

For server-side projects, dotenv allows configuration variables to be defined in a local file (.env) and automatically added to Node's process.env object.

The above is the detailed content of How to Manage Global Variables in Webpack?. For more information, please follow other related articles on the PHP Chinese website!