一、简介
1. 本文主要介绍对webpack.config.js进行拆分，让开发时需要的配置和发布时需要的配置进行分离。为什么要把好好的webpack.config.js拆分开呢？因为有一些配置就是为了发布项目才搞上去的，比如UglifyJsWebpackPlugin，这玩意可以压缩输出文件，那么好了，我开发的时候要配置它以后，我想查看一下输出文件是什么，排查问题的时候，这时候完全是看不了的。那么有人会问，我发布的时候再删掉这个配置啊，我的回答是：不会就只有这个配置的，肯定会有很多类似这样的冲突配置，你还得每次都记住哪些是要删掉了，忘了还不行。所以还不如直接拆开了来配置。
（Tips: 这是压缩后的输出文件，根本没法儿看代码。。。）
2. 新建三个js文件: base.config.js、prod.config.js、dev.config.js。base.config.js表示基础配置，prod.config.js表示发布的时候的webpack配置，dev.config.js表示开发时的webpack配置文件。
二、合并配置文件
base.config.js中存放的是公共的开发配置，也就是不管是开发时还是发布时都需要用到的配置；prod.config.js中存放的是发布时特有的配置；base.config.js存放就是开发时特有的配置。所以当我们要进行开发的时候，我们需要base.config.js和dev.config.js合并后作为我们的配置文件，发布时也是如此。因此我们还需要一个能够合并配置文件的东西: webpack-merge。
3. 安装webpack-merge： npm install webpack-merge --save-dev 。
4. 合并base.config.js和dev.config.js以及base.config.js和prod.config.js:
三、替换掉webpack.config.js
此时我们可以用上面的三个配置文件替换掉webpack.config.js;webpack默认找的是webpack.config.js这个文件作为配置文件，所以我们先删掉webpack.config.js(保证你的三个替代文件搞好了再删它哦);然后在package.json中的scripts配置，指定 npm run build是根据prod.config.js来作为配置文件；npm run dev是以dev.config.js作为配置文件。
接着我们还需要修改一下base.config.js的打包输出路径：
接着我们可以先执行一下 npm run build， 发现已经打包好的文件已经输出到dist中，再运行npm run dev， 也成功的自动打开浏览器运行。