1.mode

webpack4.0增加了mode选项。以此来标明webpack在执行时使用相应模式的内置优化。

mode有两个值:development、production。如果不设置mode的话，webpack默认采用mode为production。

两种配置方法：

• 在相应的配置文件中直接设置。

  module.exports = {
    mode: 'development' // or 'production'
  }

• 通过CLI参数传递。

  webpack --mode=development --config webpack.config.js

在设置mode为development或production后，Node环境下的变量process.env.NODE_ENV也会对应设置为development或production。

另外，在mode的两种模式下，webpack会启用内置的不同插件。

2.mode: development

默认启用NamedModulesPlugin和NamedChunksPlugin。这两插件是为了保证module id与chunk id的稳定。

// webpack.dev.config.js
module.exports = {
+ mode: 'development'
- plugins: [
-   new webpack.NamedModulesPlugin(),
-   new webpack.NamedChunksPlugin()
-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}

3.mode: production

默认启用FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitOnErrorsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin以及UglifyJsPlugin。

// webpack.production.config.js
module.exports = {
+  mode: 'production',
-  plugins: [
-    new UglifyJsPlugin(/* ... */),
-    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    new webpack.NoEmitOnErrorsPlugin()
-  ]
}

4.process.env.NODE_ENV

在上面两章，我们了解到在利用mode设置development或production的同时，webpack使用DefinePlugin插件，声明了全局变量process.env.NODE_ENV。要注意的一点，这个全局变量针对的是entry及其依赖文件，而不是webpack配置文件。

譬如，在entry及其依赖文件当中，访问结果是：

// 不要奇怪，process.env与process.env.NODE_ENV在这里没有关系。process.env.NODE_ENV是由DefinePlugin生成的特定全局变量。

console.log(process.env) //{}
console.log(process.env.NODE_ENV) //'development' or 'production'

而在webpack配置文件中，结果如下：

// 这里的process.env与process.env.NODE_ENV是有关系的。

console.log(process.env) //{ PATH: '', PWD: '', ... }
console.log(process.env.NODE_ENV) //undefined

那么如果想在webpack配置文件中访问process.env下的自定义属性，应该怎么操作呢？答案是使用 CLI命令行。

假设在webpack配置文件中，想要让process.env.ENV的值为UAT，那么可以在package.json的scripts中这样设置：

{
  "scripts": {
    "build:UAT": "ENV=UAT webpack --config webpack.config.js"
  }
}

在webpack的配置文件当中，就可以访问到process.env.ENV，值为UAT。

5.cross-env

利用CLI命令行设置自定义参数时，在不同的操作系统下，会有兼容性问题。譬如上例当中在mac上正常使用，但在windows上就有可能出问题。为了解决这个弊端，我们一般可以使用cross-env插件。

yarn add cross-env -D

package.json中的scripts标签正确表示如下：

{
  "scripts": {
    "build:UAT": "cross-env ENV=UAT webpack --config webpack.config.js"
  }
}

6.webpack-merge

在实际项目，一般不会把webpack的相关配置都写入到一个文件webpack.config.js中。

webpack的配置文件通常设置为webpack.common.js、webpack.dev.js、webpack.prod.js。分别对应公共配置、开发配置、生产配置。这样的文件结构较为清晰、易于维护。

使用这种结构，推荐一个插件webpack-merge。它用来合并公共配置和具体的环境配置，使用之前先安装yarn add webpack-merge -D。在开发环境下：

// webpack.dev.js
const { merge } = require('webpack-merge')
const commonConfig = require('./webpack.common.js')

module.exports = merge(commonConfig, {
  plugins: [],
  optimization: {}
})