前面写过。上一篇介绍了webpack的一些配置和特性，可以提高我们的开发效率，让开发者有更好的开发体验。但是有了这个新问题，打包结果会越来越臃肿，因为在这个过程中，Webpack会自动在打包结果中添加一些内容来实现这些功能。比如之前使用的SourceMap会在输出中添加额外的代码来实现相应的功能，但是生产环境和开发环境是不一样的。对于生产环境，关注的是运行效率，而在开发环境，关注的是开发效率。为此，wepack在4.0版本中提供了模块模式，方便我们在各种环境下进行不同的配置。不同环境的配置创建不同环境的配置主要有两种方式：在配置文件中添加相应的判断条件，根据不同的环境导出不同的配置为不同的环境添加单独的配置文件，一个环境对应一个配置文件//webpack.config.jsmodule.exports=(env,arg)=>{//不同模式下的通用配置constconfig={}if(env==="development"){//在config配置中添加开发模式下的特殊配置。mode="development"config.devtool="cheap-eval-module-source-map"}elseif(env==="production"){//在configconfig.mode="production"config中添加生产模式的特殊配置.devtool="nosources-source-map"}returnconfig}通过上面的配置文件，我们可以在终端运行时根据不同的环境进行不同的配置。对于大型环境，不同的配置适用于不同的环境条件。我们可以提取公共模式文件，分别在开发环境和生产环境中设置模式文件。//webpack.common.jsmodule.exports={//常用配置}//webpack.prod.jsconstcommon=require("./webpack.common")module.exports=Object.assign(common,{//生产模式配置})//webpack.dev.jsconstcommon=require("./webpack.common")module.exports=Object.assign(common,{//开发模式配置})不同环境的配置，需要导入common配置第一个文件，后面我们会覆盖之前的属性，但是Object.assign会完全覆盖之前的属性。对于plugins数组，我们需要在原来的基础上添加配置。为此，我们需要lodash的merge功能或者webpack社区的webpack-merge插件来使用。//webpack.common.jsmodule.exports={//常用配置}//webpack.prod.jsconstmerge=require("webpack-merge")constcommon=require("./webpack.common")module.exports=merge(common,{//生产模式配置})//webpack.dev.jsconstmerge=require("webpack-merge")constcommon=require("./webpack.common")module.exports=merge(common,{//developmentmodeconfiguration})各自配置完成后，回到命令行终端尝试运行webpack打包，但是因为这里没有默认的配置文件，需要通过--config指定要使用的配置文件路径范围。$webpack--configwebpack.prod.js生产环境优化插件webpack4新加入的生产模式，内部已经自动开启了很多通用的优化功能，用户开箱即用。对于学习者来说，开箱即用会导致忽略很多需要了解的东西，以至于遇到问题无从下手。constwebpack=require("webpack");module.exports={//其他配置插件：[newwebpack.DefinePlugin({API_BASE_URL:"https://api.example.com"})]}我们看到需要的值为一段代码：constwebpack=require("webpack");module.exports={//其他配置插件：[newwebpack.DefinePlugin({API_BASE_URL:JSON.stringify("https://api.example.com")})]}参考文章《webpack原理与实践》《webpack中文文档》写在最后。本文介绍如何在webpack中添加不同环境的配置文件，以及生产环境打包时经常用到的几个插件。我们可以优化生产环境中的打包，可以提高生产环境的运行效率。
