【Webpack系列】模式(mode)

什么是模式(mode)

通常情况下，我们开发的代码在整个生命周期中会跑在 不同的 环境中，如 开发环境、测试环境、正式环境等，在这些不同环境下，我们需要使用不同的策略来应对不同的环境，如在开发环境下，我们需要 更快的 编译打包速度以及 HMR功能 来提高我们的开发效率；在测试环境下我们需要支持 单元测试 的功能；在生产环境中我们需要 更小的 产物体积以及 更快的 性能

由此可见，不同环境下我们需要针对性地对代码进行调整以适配不同环境，当然这点webpack肯定也是想到了的，所以提供了 mode 这一选项来满足需求。在webpack里，通过选择 development, production 或 none 之中的一个，来设置mode参数，从而可以启用webpack内置在相应环境下的优化，其默认值为 production

详解webpack里的模式

从上文中，我们知道webpack提供了3种模式，不同模式会开启不同的优化方案，列举如下

• development: 会将DefinePlugin中 process.env.NODE_ENV 的值设置为 development,为模块和chunk启用确定的名称
• production: 会将DefinePlugin中 process.env.NODE_ENV 的值设置为 production,为模块和chunk启用确定性的 混淆名称，开启FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin 和 TerserPlugin
• none: 不使用任何默认优化选项

需要注意的是，如果我们需要根据mode字段值来执行我们自己的优化策略，那么配置文件就需要导出一个函数，而不是对象，示例如下

var config = {
  ...
  entry: './app.js'
  ...
};

module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    config.devtool = 'source-map';
  }

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

  return config
}

结语

模式(mode)的概念就我理解而言，类似于babel里的预设，本质上都是将一堆插件捆绑成一个插件集，然后统一使用，这样就不需要我们一个个去配置对应的插件，提供了便利性。这个概念没有需要深挖的东西，只要知道它是干嘛的我觉得就足够了，好啦，就写到这啦，over！