Development / Production不同配置文件打包

项目开发时一般需要使用两套配置文件，用于开发阶段打包（不压缩代码，不优化代码，增加效率）和上线阶段打包（压缩代码，优化代码，打包后直接上线使用）

抽取三个配置文件：

• webpack.base.js

• webpack.prod.js

• webpack.dev.js

步骤如下：

1. 将开发环境和生产环境公用的配置放入base中，不同的配置各自放入prod或dev文件中（例如：mode）

2. 然后在dev和prod中使用webpack-merge把自己的配置与base的配置进行合并后导出

   npm i -D webpack-merge

3. 将package.json中的脚本参数进行修改，通过--config手动指定特定的配置文件

定义环境变量

生产与开发环境的配置文件是不一样的，但有时候会遇到一个需求：

在开发的时候有一个服务器，可能是本地的服务器或者内网地址，当上线的时候不能再是这个地址，需要修改，希望可以自动切换。

除了区分不同的配置文件进行打包，还需要在开发时知道当前的环境是开发阶段或上线阶段，所以可以借助内置插件DefinePlugin来定义环境变量。最终可以实现开发阶段与上线阶段的api地址自动切换。

1. 引入webpack

   const webpack = require('webpack')
   

2. 创建插件对象，并定义环境变量，在开发和生产配置文件分别定义IS_DEV 为true和false

   new webpack.DefinePlugin({
     IS_DEV: 'false'//如果是字符串'"张三"',此处会解析字符串
   })
   

3. 在打包的代码环境下可以直接使用命令切换不同的地址
   图片