前言
Webpack 4.x发布已经有很长时间,听说其性能又有较大的提升。所以在5月中的时候手贱的升级到了最新版本,果不其然出现大量报错。经过一段时间的折腾,解决了很多升级时遇到的坑。原本那时候就打算出个博文的,结果工作一直忙到现在,写文几乎不可能。今天总算是有了时间,所以就分享一下在升级过程中遇到的坑以及我的解决方法。以下将会对涉及到的坑进行逐步说明,其中大部分以Vue项目为例。
环境及依赖库更新
由于Webpack的更新,很多Loader也必须更新才能适应Webpack的最新版本,在Vue项目中以下Loader必须更新(可能会有遗漏)!!
必须更新的loader | 最低要求版本 | 功能说明 |
---|---|---|
babel-loader | 7.1.3 | 对最新的ES语法进行转换 |
eslint-loader | 2.0.0 | 代码检查 |
file-loader | 1.1.10 | 批量修改文件路径,或者指定编译后文件存储路径 |
vue-loader | 15.0.0 | 解析、编译vue单文件组件 |
vue-style-loader | 4.1.0 | 解析、编译vue单文件组件中的样式 |
更新以上Loader后,个人建议使用npm-check
再次校验一下依赖库中有哪些不是最新的,一些破坏性或重大变更请自行在github上查找,以保证不会出现重大错误。
Webpack 4.x 的破坏性变更
由于Webpack 4.x的重大变更,导致其不再支持部分插件和Loader,其中最闹心的是Chunk分离及文件分离。
失效的插件或loader | 类型 | 功能说明 |
---|---|---|
webpack.optimize.CommonsChunkPlugin | 内置插件 | 分离Chunk。将多次出现的代码统一打包到一个文件中。Vue工程中用来打包vendor及mainfest |
webpack.optimize.UglifyJsPlugin | 内置插件 | 压缩JS |
extract-text-webpack-plugin | Loader | 分离文件。将部分代码或文件提取到单独文件中。Vue工程里用来分离CSS到指定文件 |
如果你之前的项目中使用的是webpack 3.x版本,那么恭喜你,升级到webpack 4.x后,以上列举的这些请在Webpack配置中全部删除相关代码,因为他们已经没用了(摊手)。
使用config.optimization代替
在Webpack 4.x中,新增了optimization的选项来代替之前版本中的webpack.optimize
等。在optimization选项中,我们可以进行详细的设置,以达到分离CSS,分离Chunk,压缩文件等等操作。点我查看官方文档
webpack 4.0
module.exports = {
//...
optimization: {}
};
基于webpack 4.0的Vue项目
const webpackConfig = merge(baseWebpackConfig, {
//...
optimization: {}
})
</