网上教程很多，鱼龙混杂，看了一脸懵逼，记录一下自己在升级过程中遇到的一些问题。建议遇到了webpack插件问题逐行去看一下webapck里关于此插件的文档（尽量看英文文档，不懂得有道翻译，中文文档更新落后太多，容易有坑）。
首先需要升级你的webpack和安装webpack-cli。然后把package.json的包升级一下，过程就不描述了，自己去升级。 建议安装npm-check，来检测安装所有的依赖包。
1、npm install -g npm-check
2、npm-check -u -g 全局更新包 (全局目录) 通过上下键可以移动光标，使用空格键可以选择需要处理的包，回车直接进行处理
3、npm-check -u 更新某个项目的包 （项目目录）建议使用这个 通过npm-check -u 就可以，不需要--save就可以直接更新package.json里面的内容
升级webpack和webapck-cli并且成功升级好npm包之后。还需要去修改一下build里的webpack.dev.conf.js webpack.prod.conf.js utils.js里的配置。下面详细介绍：
一、开发环境改动不多，改几个配置就好了。
mode 设置为 development
rules: vue-cli引用的是utils里的styleLoaders工具函数，这里面有些loader和插件要改一下。
webpack.dev.conf.js
utils.js
webpack4.x里用'mini-css-extract-plugin''替换extract-text-webpack-plugin'，utils.js的generateLoaders函数需要改一下：生产环境使用min-css-extract-plugin，开发环境用vue-style-loader。
utils.js
二、生产环境配置
涉及到这三个的都可以删除
在webpack.prod.conf.js里面把这两个插件引入。mini是用来把css单独抽离成一个个css的，opti是用来在生产环境把css压缩，去除无效冗余代码和注释的。
webpack.prod.conf.js
引入后在plugins注册这两个插件。
webpack.prod.conf.js
Since webpack v4, the CommonsChunkPlugin was removed in favor of optimization.splitChunks.
webpack4开始官方移除了commonchunk插件，改用了optimization属性进行更加灵活的配置。
其中最重要的是需要配置splitChunks和runtimeChunk。webpack4会在如下情况下会自动的启用放分割chunk块：
1、可以共享新块，或者模块来自node_modules文件夹
2、新块将大于30kb(在min+gz之前)
3、当按需加载块时，并行请求的最大数量将小于或等于5
4、初始页面加载时并行请求的最大数量将小于或等于3
截图来源webapck官方文档
webpack4.3 optimization的配置
webpack.prod.conf.js里的配置
至此，vue-cli3升级webpack4.3成功，可以正常在开发环境和生产环境运行成功。
网友评论