Configuration

You may have noticed that a few webpack configurations look exactly alike. This is because of the _\ webpack's configuration file is the JavaScript file that exports the 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 for the control flow of expressions, e.g. the ?: operator
• use constants or variables for often used values
• write and execute functions to generate the configuration files

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 most important part to take away from this document is that there are many different ways to format and style your webpack configuration. The key is to stick with something consistent that you and your team can understand and maintain.

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

Simple Configuration

_ webpack.config.js _

var 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