07环境构建配置差异

开发和生产环境的构建配置差异

日常开发可能会构建2~3套环境：

1. 开发使用，本地调试，不压缩代码，打印debug信息，包含sourcemap文件
2. 线上使用，代码压缩，不打印debug
3. 还可能有一套测试环境

虽然webpack4+ 有mode模式后方便不少，但有些配置还是需要手动区分环境后来进行调整。

在配置文件中区分mode

之前我们的配置文件都是直接对外暴露一个 JS 对象，这种方式暂时没有办法获取到 webpack 的 mode 参数，我们需要更换一种方式来处理配置。根据官方的文档多种配置类型，配置文件可以对外暴露一个函数，因此我们可以这样做：

module.exports = (env, argv) => ({
  optimization: {
    minimize: false,
    // 使用argv来获取mode参数
    minimizer: argv.mode === 'production' ? [
      new UglifyJsPlugin({ /* */ }),
      // 仅在我们要自定义压缩配置时才这么做
      // mode为production时webpack会默认使用压缩js的plugin
    ] : []
  }
})

这样获取 mode 之后，我们就能够区分不同的构建环境，然后根据不同环境再对特殊的 loader 或 plugin 做额外的配置就可以了

以上是webpack 4.0+ 的做法，下面说下 webpack 3.x版本下的方式：

在npm中scripts字段下添加用于生产环境的构建命令：

{
  "scripts": {
    "build": "NODE_ENV=production webpack",
    "develop": "NODE_ENV=development webpack-dev-server"
  }
}

然后在webpack.config.js中可通过process.env.NODE_ENV获取命令传入的环境变量

const config = {/* webpack配置 */}

if (process.env.NODE_ENV === 'production') {
  // 生产环境需要做的事情，如使用代码压缩插件等
  config.plugins.push(new UglifyJsPlugin())
}
module.exports = config

运行时的环境变量

我们使用webpack传递mode参数，是可以在我们的应用代码运行时，通过process.env.NODE_ENV获取。

下面例子是在开发时简单封装console.log打印

export default function log(...args) {
  if (process.env.NODE_ENV === 'development' && console && console.log) {
    console.log.apply(console, args)
  }
}

常见的环境差异配置

这里列举一下常见的 webpack 构建差异配置：

• 生产环境可能需要分离 CSS 成单独的文件，以便多个页面共享同一个 CSS 文* 件
• 生产环境需要压缩 HTML/CSS/JS 代码
• 生产环境需要压缩图片
• 开发环境需要生成 sourcemap 文件
• 开发环境需要打印 debug 信息
• 开发环境需要 live reload 或者 hot reload 的功能

拆分配置

我们可以把webapck配置按照不同环境拆分成多个小文件，运行时直接根据环境变量加载对应配置即可，基本划分如下：

• webpack.base.js 基础部分，可共享配置
• webpack.development.js 开发环境
• webpack.production.js 生产环境
• webpack.test.js 测试环境

我们要明白，对于webpack配置，其实就是对外暴露一个JS对象，所以对于该对象，我们可以使用JS代码来修改它：

const config = {/**/}

// 我们可以修改这个config来调整配置
config.plugins.push(new YourPlugin())
module.exports = config

因此，只要有一个工具能比较智能地合并多个配置对象，我们就可以很轻松地拆分 webpack 配置，然后通过判断环境变量，使用工具将对应环境的多个配置对象整合后提供给 webpack 使用。这个工具就是webpack-merge。