webpack4：连奏中的进化 (3)

建议升级webpack4，同时升级涉及到的loaders和plugins。webpack4 中 cli 工具分离成了 webpack 核心库 与 webpack-cli 命令行工具两个模块，需要使用 CLI ，必安装 webpack-cli 至项目中。

npm i webpack webpack-cli webpack-dev-server -D

涉及到的插件有：

"vue-loader": "^15.0.10", "vue-style-loader": "^4.1.0", "vue-template-compiler": "^2.5.16", "copy-webpack-plugin": "^4.0.1", "extract-text-webpack-plugin": "^4.0.0-beta.0", "html-webpack-plugin": "^3.1.0", "optimize-css-assets-webpack-plugin": "^4.0.0", "webpack-bundle-analyzer": "^2.11.1", "webpack-dev-middleware": "^3.1.2", "webpack-dev-server": "^3.1.3", "webpack-merge": "^4.1.0"

2.修改webpack.base.conf.js

webpack4推荐使用了最新版本的vue-loader（"vue-loader": "^15.0.10"），但是最新的vue-loader需要在webapck config文件中设置VueLoaderPlugin插件，否则会报以下错误：

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

webpack.base.conf.js文件中的改动主要是添加VueLoaderPlugin插件。

const { VueLoaderPlugin } = require('vue-loader'); module.exports = { ... plugins: [ // 添加VueLoaderPlugin，以响应vue-loader new VueLoaderPlugin() ], ... }

3.修改webpack.dev.conf.js

添加mode属性，并设置为development模式；然后注释掉 webpack4开发模式已经内置的插件，如webpack.NamedModulesPlugin和webpack.NoEmitOnErrorsPlugin 插件。

4.修改webpack.prod.conf.js

添加mode属性，并设置为production模式；然后注释掉 webpack4生产模式已经内置的插件，如CommonsChunkPlugin、uglifyjs-webpack-plugin 、ModuleConcatenationPlugin插件；最后根据webpack4提供的文档配置optimization，使用splitChunks和runtimeChunk完成chunk的提取和优化。

const webpackConfig = merge(baseWebpackConfig, { ... optimization: { // 采用splitChunks提取出entry chunk的chunk Group splitChunks: { cacheGroups: { // 处理入口chunk vendors: { test: /[\\/]node_modules[\\/]/, chunks: 'initial', name: 'vendors', }, // 处理异步chunk 'async-vendors': { test: /[\\/]node_modules[\\/]/, minChunks: 2, chunks: 'async', name: 'async-vendors' } } }, // 为每个入口提取出webpack runtime模块 runtimeChunk: { name: 'manifest' } } ... })

经过以上操作，我们已经基本完成了vue-cli项目的改造。运行项目的时候，注意看控制台的报错，是哪个插件报的错就去升级那个插件，如果存在找不到模块之类的错误就去升级对应的loader。vue-cli项目webapck4下配置demo已经上传到github，欢迎下载。

实例说话—webpack4的性能如何

webapck4旨在开发模式下提升构建速度、提升用户体验，在生产模式下减小产出包的大小，提升加载和运行速度，下面是webapck3和webapck4下vue-cli的webapck模板项目的实际效果截图：
开发者模式下：

由上图可以知道：webapck4下的构建速度是3703ms，明显由于webapck3下的5617ms；