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

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

Use these features when appropriate.

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

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 following examples below describe how webpack's configuration object can be both expressive and configurable because it is code:

The Simplest Configuration


var path = require('path');

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

Multiple Targets

See: Exporting multiple configurations

Using other Configuration Languages

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

See: Configuration Languages