webpack 配置之 模式mode

245 7 个月前
在webpack配置文件中,提供 mode 配置选项,告知 webpack 使用相应环境的内置优化。

webpack配置文件中 mode 配置选项是一个 string,可能的值有:developmentproductionnone。默认值为production

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

用法

modewebpack配置导出对象的一个选项

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

也可以通过 cli 参数传递

webpack --mode=production

选项描述

选项 描述
development 会将 DefinePluginprocess.env.NODE_ENV 的值设置为 development。启用 NamedChunksPluginNamedModulesPlugin
production 会将 DefinePluginprocess.env.NODE_ENV 的值设置为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPluginTerserPlugin
none 没有任何默认优化选项

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

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

development

设置 modedevelopment

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

设置 modeproduction

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

设置 modenone

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;
}
分类栏目
© 2018邮箱:11407215#qq.comGitHub沪ICP备12039518号-6