Vue项目升级到Webpack 4.x初步踩坑总结

前言

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: {}
})</