Providing the mode configuration option tells webpack to use its built-in optimizations accordingly.
string = 'production': 'none' | 'development' | 'production'
Provide the mode option in the config:
module.exports = {
  mode: 'development',
};or pass it as a CLI argument:
webpack --mode=developmentThe following string values are supported:
| Option | Description | 
|---|---|
| development | Sets process.env.NODE_ENVonDefinePluginto valuedevelopment. Enables useful names for modules and chunks. | 
| production | Sets process.env.NODE_ENVonDefinePluginto valueproduction. Enables deterministic mangled names for modules and chunks,FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPluginandTerserPlugin. | 
| none | Opts out of any default optimization options | 
If not set, webpack sets production as the default value for mode.
// webpack.development.config.js
module.exports = {
  mode: 'development',
};// webpack.production.config.js
module.exports = {
  mode: 'production',
};// webpack.custom.config.js
module.exports = {
  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:
var config = {
  entry: './app.js',
  //...
};
module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    config.devtool = 'source-map';
  }
  if (argv.mode === 'production') {
    //...
  }
  return config;
};