简述
对配置文件进行抽离,以达到开发时依赖一个配置文件,发布时依赖一个配置文件的目标,在配置文件的代码量巨大时,此举可有效提升整洁性;
所有配置混杂的webpack.config.js在分离完成后可删除
一、安装插件&配置
通常会分离为三个文件,一个开发时依赖的配置文件(这里我命名为dev.config.js),一个发布时依赖的配置文件(这里我命名为prod.config.js),还有一个两模式下都需要依赖的配置文件(这里我命名为base.config.js);
安装插件
没错,这个活webpack还是干不了.
webpack-merge协助对两个配置文件进行合并.
1 | npm i webpack-merge -D |
该插件在使用时需要导入:
1 | const webpackMerge = require('webpack-merge') |
二、抽离存放
抽离存放可以,但是用的时候也不能让webpack找不着;
1.分离配置文件
1 | //这是webpack.config.js的内容 |
仅生产环境下需要的配置放到prod.config.js
1 | //这是prod.config.js的内容 |
仅开发环境下需要的配置放到dev.config,js
1 | //这是dev.config,js的内容 |
开发环境&生产环境下均需要的配置放到base.config,js
1 | //这是base.config,js的内容 |
到此,我们已经把webpack.config.js分开为三个文件,你可以删除原本的webpack.config.js了.
2.merge配置文件之间接合
配置文件在用的时候还是要发挥合在一起时的效果的;这需要用到merge了,它的本意就是”结合”.
现在更新一下三个文件的内容:
1.prodConfig中进行baseConfig和prodConfig的合并
1 | /*因为在pordConfig内,所以只需要引入baseConfig写在webpackMerge()方法内,再把prodConfig内需要合并的代码也写在webpackMerge()方法内即可.*/ |
baseConfig合并于prodConfig内,所以接下来仅需要进行dev.config.js和prodConfig的合并
2.devConfig中进行dev.config.js和prodConfig的合并
1 | /*因为在devConfig内,所以只需要引入ProdConfig写在webpackMerge()方法内,再把devConfig内需要合并的代码也写在webpackMerge()方法内即可.*/ |
完事了吗?但这样直接打包会报错.
三、打包
最后需要在package.json中代指 打包指令 的别名中进行配置,比如在build和dev中:
1 | "build":"webpack --config ./build/prod.config.js" |
合并完毕后打包,三文件会放到base.config.js所在的文件夹中,因为base中的output的path设置的路径是自身所在文件夹的绝对路径,当然,是可以改的.
修改这个绝对路径,以把三个文件输出至合适的位置即可.
总结
补下webpack的内容,只捡了一些内容比较多的部分写,准备开更vue-cli了.
感谢你读到这里.