在前面文章中介绍了一些webpack配置和特性，能够提升我们的开发效率，让开发者能够有着更好的开发体验。但是，也伴随这新的问题出现，打包结果会变得越来越臃肿，因为在这个过程中Webpack为了实现这些特性，会自动往打包结果中添加一些内容。例如之前使用的Source Map会在输出结果中添加额外的代码实现相应的功能，但是生产环境和开发环境有所差异，对于生产环境而言注重的运行效率，在开发环境注重的是开发效率。为此，wepack在4.0版本提供了module模式，方便我们在各种环境下进行不同的配置。
创建不同的环境配置的方式主要有两种：
在配置文件中添加相应的判断条件，根据环境不同导出不同配置
为不同环境单独添加一个配置文件，一个环境对应一个配置文件
复制
//webpack.config.js module.exports = (env,arg)=>{ //不同模式下公共配置 const config = { } if(env === "development"){ //为config添加开发模式下的特殊配置 config.mode = "development" config.devtool = "cheap-eval-module-source-map" }else if(env === "production"){ //为config添加生产模式下的特殊配置 config.mode = "production" config.devtool = "nosources-source-map" } return config }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
通过上面的配置文件，我们可以在终端运行根据不同环境判断执行不同的配置，对于大型环境适合在不同环境条件下使用不同的配置。我们可以将公共模式的文件抽取出来，分别设置开发环境和生产环境下的模式文件。
复制
//webpack.common.js module.exports = { //公共配置 } //webpack.prod.js const common = require("./webpack.common") module.exports = Object.assign(common,{ //生产模式配置 }) //webpack.dev.js const common = require("./webpack.common") module.exports = Object.assign(common,{ //开发模式配置 })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
对于不同环境的配置中，需要先导入公共配置文件，我们在后面对前面的属性进行覆盖，但是Object.assign会把之前的完全覆盖。对于plugins数组我们需要在原先的基础中添加配置，为此我们需要lodash的merge函数或者webpack社区的webpack-merge插件进行使用。
复制
//webpack.common.js module.exports = { //公共配置 } //webpack.prod.js const merge = require("webpack-merge") const common = require("./webpack.common") module.exports = merge(common,{ //生产模式配置 }) //webpack.dev.js const merge = require("webpack-merge") const common = require("./webpack.common") module.exports = merge(common,{ //开发模式配置 })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
在分别配置完成过后，回到命令行终端，尝试运行webpack打包，不过因为这里已经没有默认的配置文件，所以需要通过--config参数来指定所使用的配置文件路径。
复制
$ webpack --config webpack.prod.js
1.
在weback4中新增的production模式下，内部已经自动开启了很多通用的优化功能，对于使用者而言可以开箱即用。对于学习者而言，开箱即用会导致忽略很多需要了解的东西，以至于出现问题无从下手。
复制
const webpack = require("webpack"); module.exports = { //其他配置 plugins:[ new webpack.DefinePlugin({ API_BASE_URL:"https://api.example.com" }) ] }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
我们看到值要求的是一个代码片段：
复制
const webpack = require("webpack"); module.exports = { //其他配置 plugins:[ new webpack.DefinePlugin({ API_BASE_URL:JSON.stringify("https://api.example.com") }) ] }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
《webpack原理与实践》
《webpack中文文档》
本文介绍了如何在webpack添加不同环境的配置文件，以及在生产模式打包时经常用到的几个插件。我们可以针对生产环境下的打包进行优化，能够提升生产环境的运行效率。