webpack 配置之 模式mode

webpack配置文件中 mode 配置选项是一个 string，可能的值有：development、production、none。默认值为production。

选择不同的模式来告诉 webpack 使用其相应的内置的优化。

用法

mode是webpack配置导出对象的一个选项

module.exports = {
  mode: 'production'
};

也可以通过 cli 参数传递

webpack --mode=production

选项描述

如果没有设置，webpack 会将 mode 的默认值设置为 production

设置mode可以改变 process.env.NODE_ENV 的但，反过来，设置 NODE_ENV 并不会自动地设置 webpack 中 mode 选项。这里的 process.env.NODE_ENV 不是node中的环境变量,而是 webpack.DefinePlugin 中定义的全局变量,允许你根据不同的环境执行不同的代码。

development

设置 mode为development

module.exports = {
  mode: 'development'
}

其相当于设置为如下配置

module.exports = {
  devtool: 'eval',
  cache: true,
  performance: {
    hints: false
  },
  output: {
    pathinfo: true
  },
  optimization: {
    namedModules: true,
    namedChunks: true,
    nodeEnv: 'development',
    flagIncludedChunks: false,
    occurrenceOrder: false,
    sideEffects: false,
    usedExports: false,
    concatenateModules: false,
    splitChunks: {
      hidePathInfo: false,
      minSize: 10000,
      maxAsyncRequests: Infinity,
      maxInitialRequests: Infinity,
    },
    noEmitOnErrors: false,
    checkWasmTypes: false,
    minimize: false,
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.NamedChunksPlugin(),
    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
  ]
}

production

设置 mode为production

module.exports = {
  mode:"production"
}

其相当于设置为如下配置

module.exports = {
  performance: {
    hints: 'warning'
  },
  output: {
    pathinfo: false
  },
  optimization: {
    namedModules: false,
    namedChunks: false,
    nodeEnv: 'production',
    flagIncludedChunks: true,
    occurrenceOrder: true,
    sideEffects: true,
    usedExports: true,
    concatenateModules: true,
    splitChunks: {
      hidePathInfo: true,
      minSize: 30000,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
    },
    noEmitOnErrors: true,
    checkWasmTypes: true,
    minimize: true,
  },
  plugins: [
    new TerserPlugin(/* ... */),
    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
}

none

设置 mode为none

module.exports = {
  mode:"none"
}

其相当于设置为如下配置

module.exports = {
  performance: {
   hints: false
  },
  optimization: {
    flagIncludedChunks: false,
    occurrenceOrder: false,
    sideEffects: false,
    usedExports: false,
    concatenateModules: false,
    splitChunks: {
      hidePathInfo: false,
      minSize: 10000,
      maxAsyncRequests: Infinity,
      maxInitialRequests: Infinity,
    },
    noEmitOnErrors: false,
    checkWasmTypes: false,
    minimize: false,
  },
  plugins: []
}

如果要根据 webpack.config.js 中的 mode 变量更改打包行为，则必须将配置导出为一个函数，而不是导出为一个对象：

var config = {
  entry:'./src/index.js',
    //...
}
module.exports = (env,args) => {
  if(args.mode === 'development'){
    config.devtool = 'source-map'
  }
  if(args.mode === 'production'){
    //...
  }
  return config;
}