Mode

Providing the mode configuration option tells webpack to use its built-in optimizations accordingly.

'none' | 'development' | 'production' = 'production'

Usage

Provide the mode option in the config:

export default {
  mode: "development",
};

or pass it as a CLI argument:

webpack --mode=development

The following string values are supported:

Option	Description
`development`	Sets `process.env.NODE_ENV` on `DefinePlugin` to value `development`. Enables useful names for modules and chunks.
`production`	Sets `process.env.NODE_ENV` on `DefinePlugin` to value `production`. Enables deterministic mangled names for modules and chunks, `FlagDependencyUsagePlugin`, `FlagIncludedChunksPlugin`, `ModuleConcatenationPlugin`, `NoEmitOnErrorsPlugin` and `MinimizerPlugin`.
`none`	Opts out of any default optimization options

If not set, webpack sets production as the default value for mode.

Defaults per mode

mode doesn't do anything by itself — it picks the defaults of other options, each of which you can still set explicitly. These are the options whose default depends on it:

Option	`development`	`production`	`none`
`cache`	`{ type: 'memory' }`	`false`	`false`
`devtool`	`'eval'`	`false`	`false`
`output.pathinfo`	`true`	`false`	`false`
`performance.hints`	`false`	`'warning'`	`false`
`optimization.chunkIds`	`'named'`	`'deterministic'`	`'natural'`
`optimization.moduleIds`	`'named'`	`'deterministic'`	`'natural'`
`optimization.nodeEnv`	`'development'`	`'production'`	`false`
`optimization.emitOnErrors`	`true`	`false`	`true`
`optimization.sideEffects`	`'flag'`	`true`	`'flag'`
`optimization.usedExports`	`false`	`true`	`false`
`optimization.innerGraph`	`false`	`true`	`false`
`optimization.mangleExports`	`false`	`true`	`false`
`optimization.concatenateModules`	`false`	`true`	`false`
`optimization.flagIncludedChunks`	`false`	`true`	`false`
`optimization.realContentHash`	`false`	`true`	`false`
`optimization.checkWasmTypes`	`false`	`true`	`false`
`optimization.minimize`	`false`	`true`	`false`

optimization.splitChunks is also tuned by mode: minSize, enforceSizeThreshold, maxAsyncRequests and maxInitialRequests are stricter in production. See SplitChunksPlugin for their values.

Two rows come with a condition: performance.hints only applies to browser targets, and devtool stays false in development when the build outputs an ES module library. With experiments.css enabled, development additionally defaults CSS assets to source-map.

Mode: development

// webpack.development.config.js
export default {
  mode: "development",
};

Mode: production

// webpack.production.config.js
export default {
  mode: "production",
};

Mode: none

// webpack.custom.config.js
export default {
  mode: "none",
};

If you want to change the behavior according to the mode variable inside the webpack.config.js, you have to export a function instead of an object:

const config = {
  entry: "./app.js",
  // ...
};

export default (env, argv) => {
  if (argv.mode === "development") {
    config.devtool = "source-map";
  }

  if (argv.mode === "production") {
    // ...
  }

  return config;
};