Configuration

You may have noticed that few webpack configurations look exactly alike. This is because webpack's configuration file is a JavaScript file that exports a webpack configuration. This configuration is then processed by webpack based upon its defined properties.

Because it's a standard Node.js CommonJS module, you can do the following:

  • Import other files via require(...)
  • use utilities on npm via require(...)
  • use JavaScript control flow expressions, e.g. the ?: operator
  • use constants or variables for often used values
  • write and execute functions to generate a part of the configuration

Use these features when appropriate.

While they are technically feasible, the following practices should be avoided:

  • Access CLI arguments, when using the webpack CLI (instead write your own CLI, or use --env)
  • Export non-deterministic values (calling webpack twice should result in the same output files)
  • Write long configurations (instead split the configuration into multiple files)

The examples below describe how webpack's configuration can be both expressive and configurable because it is code:

Introductory Configuration

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js',
  },
};

See: Configuration section for all supported configuration options

Multiple Targets

Along with exporting a single configuration as an object, function or Promise, you can export multiple configurations.

See: Exporting multiple configurations

Using other Configuration Languages

Webpack accepts configuration files written in multiple programming and data languages.

See: Configuration Languages

4 Contributors

TheLarkInnsimon04EugeneHlushkobyzyk

© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/concepts/configuration