vue/cli2下的webpack3升级webpack4记录【转】

前言：由于公司项目是历史项目，因此还是基于vue/cli2搭建的，webpack版本也是3.6.0。听说升级到webpack4之后打包速度贼快，所以早就想体验一下，但是又不敢拿公司项目开刀，因此先找一个以前写过的demo项目练练手。下面就记录一下vue/cli2下的webpack3升级webpack4中遇到的一些问题及解决方案。

目录
1、安装 webpack-cli ，升级webpack
2、升级webpack-dev-server至3.9.0
3、升级html-webpack-plugin
4、升级vue-loader
5、增加VueLoaderPlugin插件代码
6、升级一下 eslint 和 eslint-loader。
7、设置mode
8、配置performance。
9、安装babel-plugin插件转换es6代码。
10、配置optimization.splitChunks，删除optimize.CommonsChunkPlugin
11、去除extract-text-webpack-plugin，安装 mini-css-extract-plugin
1、安装 webpack-cli ，升级webpack

npm i --save-dev webpack webpack-cli

如果发现执行上述命令之后，webpack还是3.x的版本，那很可能是你的package-lock.json中锁定了webpack的最高版本。所以我们直接指定webpack4的最新稳定版进行安装。

npm i --save-dev [email protected]

2、升级webpack-dev-server至3.9.0
此时我们运行npm run dev，会发现报错：Error: Cannot find module ‘webpack/bin/config-yargs’

这是由于webpack-dev-server的版本和webpack4的版本不兼容导致的，webpack3对应的最高webpack-dev-server版本为2.11.5，所以我们要安装2.11.5以上的版本。查阅npm官网，安装目前webpack4对应最新的webpack-dev-server版本为3.9.0

npm i [email protected] --save-dev

3、升级html-webpack-plugin
安装完毕之后，再次执行npm run dev，发现之前的报错消失了。但是又有新的错误提示：compilation.mainTemplate.applyPluginsWaterfall is not a function

这是因为html-webpack-plugin 版本不兼容导致的，所以我们需要升级一下html-webpack-plugin。

npm i [email protected] -D

4、升级vue-loader
安装完毕之后，再次执行npm run dev，发现之前的报错消失了。但是又有新的错误提示：
Module build failed (from ./node_modules/vue-loader/index.js):
TypeError: Cannot read property ‘vue’ of undefined

这是因为vue-loader的版本不兼容webpack4导致的，所以我们升级一下vue-loader，

npm i [email protected] -D

5、增加VueLoaderPlugin插件代码

安装完毕之后，再次执行npm run dev，发现之前的报错消失了。但是又有新的错误提示：
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
File was processed with these loaders:
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

这里是因为最新版的 vue-loader 需要加一个新的配置 VueLoaderPlugin。
打开webpack.dev.conf.js，增加如下代码，…表示省略部分已有的代码

//webpack.dev.conf.js
...
// 引入
const { VueLoaderPlugin } = require('vue-loader')
...
// 找到plugins数组，增加一个数组项
plugins: [
    ...
    new VueLoaderPlugin()
]

然后打开webpack.prod.conf.js，进行同样的修改：

// webpack.prod.conf.js
...
// 引入
const { VueLoaderPlugin } = require('vue-loader')
...
// 找到plugins数组，增加一个数组项
plugins: [
    ...
    new VueLoaderPlugin()
]

6、升级一下 eslint 和 eslint-loader。
安装完毕之后，再次执行npm run dev，发现之前的报错消失了。但是又有新的错误提示：
cannot read property ‘eslint’ of undefind!

很明显，这里我们需要升级eslint相关插件。

npm i --save-dev eslint-loader@latest eslint@latest

7、设置mode
安装完毕之后，再次执行npm run dev，发现之前的报错消失了。但是又有新的错误提示：
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each enviroment.
分别打开webpack.dev.conf.js和webpack.prod.conf.js 。
在webpackConfig 中增加以下代码：

// webpack.dev.conf.js
const webpackConfig = merge(baseWebpackConfig, {
    mode: 'development',
    module: {...}
}

// webpack.prod.conf.js 
const webpackConfig = merge(baseWebpackConfig, {
    mode: 'production',
    module: {...}
}

8、配置performance。
安装完毕之后，再次执行npm run dev，发现之前的报错消失了。但是又有新的错误提示：
asset size limit: The following asset(s) exceed the recommended size limit (244 kib).
This can impact web performance.

在webpack.base.conf增加：

// webpack.base.conf
module.exports = {
    performance: {
        hints: "warning", // 枚举
        maxAssetSize: 30000000, // 整数类型（以字节为单位）
        maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
        assetFilter: function(assetFilename) {
        // 提供资源文件名的断言函数
        return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
        }
    },
    module: {...}
}

9、安装babel-plugin插件转换es6代码。
安装完毕之后，再次执行npm run dev，发现之前的报错消失了。项目似乎已经可以正常运行了。但，打开项目地址一看，一片空白。F12控制台一样，鲜红的报错：
Uncaught TypeError: Cannot assign to read only property ‘exports’ of object ‘#