实战笔记：Vue2项目Webpack 3升级到Webpack 4的实操指南

在Web开发领域，保持技术的更新好坏常重要的。随着前端构建工具的快速发展，Webpack已经更新到5.x版本，如果你正在利用Vue2项目，并且还在利用Webpack 3，那么是时候考虑升级一下Webpack了。我最近将我的Vue2项目从Webpack 3升级到了Webpack 4。以下是我升级过程中积累的履历和步调，希望能帮助那些准备进行雷同升级的开发者。
写在前面

为什么不直接升级到webpack5.x?

这个问题问得很好，我最开始也是直接一键升级到最新版，一启动，直接报各种版本不匹配（哭），由于项目比较大引入的依赖太多，实在是难以推进，所以退而求其次，先升级到webpack4.x，后面再想办法往上升！！！
升级前的准备

在进行任何庞大的项目改动之前，备份总是第一位的。请首先确保你的项目已经被推送到Git仓库，如许纵然升级失败，也能轻松回退到之前的版本。
升级开始

我本来的webpack版本是^3.6.0，本次升级为：^4.46.0
我本次升级涉及到的文件目次如下：

1、更新package.json中Webpack和相关依赖 

以下是我本次升级新增以及更新的依赖版本：

依赖	原版本	升级后版本	范例
babel-polyfill	--	^6.26.0	新增
babel-plugin-transform-es2015-modules-commonjs	--	^6.26.2	新增
html-webpack-plugin	^2.30.1	^4.3.0	升级
mini-css-extract-plugin	--	0.9.0	新增
vue-loader	^13.3.0	^15.7.0	升级
webpack	^3.6.0	^4.46.0	升级
webpack-cli	--	3.3.12	新增
webpack-dev-server	^2.11.5	^3.11.1	升级

2、安装依赖

1. npm install

复制代码

如果由于项目中其他依赖冲突产生的报错及安装失败，可以加上--legacy-peer-deps
 

1. npm install --legacy-peer-deps

复制代码

3、 逐步修改Webpack设置

.babelrc文件：

1. // 修改前
2. {
3.   "presets": [
4.     ["env", {
5.       "modules": false,
6.       "targets": {
7.         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
8.       }
9.     }],
10.     "stage-2"
11.   ],
12.   "plugins": ["transform-vue-jsx", "transform-runtime"]
13. }
16. // 修改后
17. {
18.   "presets": [
19.     ["env", {
20.       "modules": false,
21.       "targets": {
22.         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
23.       }
24.     }],
25.     "stage-2"
26.   ],
27.   "plugins": ["transform-vue-jsx", "transform-runtime","transform-es2015-modules-commonjs"]
28. }

复制代码

build/utils.js文件：

1. // 删除或注释以下代码
2. const ExtractTextPlugin = require('extract-text-webpack-plugin')
4. // 改为
5. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
7. // 删除或注释以下代码
8.   if (options.extract) {
9.       return ExtractTextPlugin.extract({
10.         use: loaders,
11.         fallback: 'vue-style-loader',
12.         // https://www.cnblogs.com/luosiding/p/8268837.html
13.         publicPath: '../../'
14.       })
15.     } else {
16.       return ['vue-style-loader'].concat(loaders)
17.     }
19. // 改为
20. return [options.extract ? MiniCssExtractPlugin.loader : 'vue-style-loader'].concat(loaders)

复制代码

build/webpack.base.conf.js文件：

1. // 删除或注释以下代码
2. const vueLoaderConfig = require('./vue-loader.conf')
3. // 改为
4. const { VueLoaderPlugin } = require('vue-loader')
7. // module.exports中：
8. entry: {
9.     app: './src/main.js'
10.   },
11. // 改为：
12. entry: {
13.     app: ['babel-polyfill', './src/main.js']
14.   },
17. // 新增：
18. mode:process.env.NODE_ENV,
19. plugins: [
20.     new VueLoaderPlugin()
21.   ],
24. // 删掉options
25.   module: {
26.     rules: [
27.       //...(config.dev.useEslint ? [createLintingRule()] : []),
28.       {
29.         test: /\.vue$/,
30.         loader: 'vue-loader',
31.         options: vueLoaderConfig //删除该条
32.       },

复制代码

 build/webpack.dev.conf.js文件：

如果项目中利用了jquery才改：

1. plugins: [
2. ...,
3. new webpack.ProvidePlugin({
4.       $: 'jquery'
5.     })
6. ]

复制代码

  build/webpack.prod.conf.js文件：

1. // 删掉或注释以下代码
2. const ExtractTextPlugin = require('extract-text-webpack-plugin')
3. // 改为
4. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
7. // 删掉或注释以下代码
8. new UglifyJsPlugin({
9.       uglifyOptions: {
10.         compress: {
11.           warnings: false
12.         }
13.       },
14.       sourceMap: config.build.productionSourceMap,
15.       parallel: true
16.     }),
17. new ExtractTextPlugin({
18.       filename: utils.assetsPath('css/[name].[contenthash].css'),
19.       // Setting the following option to `false` will not extract CSS from codesplit chunks.
20.       // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
21.       // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
22.       // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
23.       allChunks: true,
24.     }),
26. // 改为：
27. new MiniCssExtractPlugin({
28.       filename: utils.assetsPath('css/[name].[contenthash].css'),
29.       ignoreOrder: true
30.     }),
33. // 删掉或注释以下代码：
34. chunksSortMode: 'dependency'
35. // 改为：
36. chunksSortMode: 'none'
39. // 删掉或注释以下代码：
40.     new webpack.optimize.CommonsChunkPlugin({
41.       name: 'vendor',
42.       minChunks (module) {
43.         // any required modules inside node_modules are extracted to vendor
44.         return (
45.           module.resource &&
46.           /\.js$/.test(module.resource) &&
47.           module.resource.indexOf(
48.             path.join(__dirname, '../node_modules')
49.           ) === 0
50.         )
51.       }
52.     }),
53.     // extract webpack runtime and module manifest to its own file in order to
54.     // prevent vendor hash from being updated whenever app bundle is updated
55.     new webpack.optimize.CommonsChunkPlugin({
56.       name: 'manifest',
57.       minChunks: Infinity
58.     }),
59.     // This instance extracts shared chunks from code splitted chunks and bundles them
60.     // in a separate chunk, similar to the vendor chunk
61.     // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
62.     new webpack.optimize.CommonsChunkPlugin({
63.       name: 'app',
64.       async: 'vendor-async',
65.       children: true,
66.       minChunks: 3
67.     }),
69. // 改为：
70. optimization: {
71.     minimizer: [
72.       new UglifyJsPlugin({
73.         parallel: true, // 开启多进程压缩。
74.         uglifyOptions: {
75.           output: { comments: false },
76.           compress: {
77.             warnings: false,
78.             drop_debugger: true, // 是否清除debugger
79.             drop_console: true // 是否清除所有console
80.             // pure_funcs: ['console.log','console.info','console.warn','console.debug']     
81.             //drop_console 设置false,需要特殊清除的
82.           }
83.         },
84.         sourceMap: config.build.productionSourceMap
85.       })
86.     ],
87.     splitChunks: {
88.       chunks: 'async',
89.       minSize: 30000, // 大于30KB才单独分离成chunk
90.       maxAsyncRequests: 5,
91.       maxInitialRequests: 3,
92.       name: true,
93.       cacheGroups: {
94.         default: {
95.           priority: -20,
96.           reuseExistingChunk: true
97.         },
98.         // 生成 vendors.js,
99.         vendors: {
100.           name: 'vendors',
101.           test: /[\\/]node_modules[\\/]/,
102.           priority: 10,
103.           chunks: 'all'
104.           // enforce: true
105.         },
106.         common: {
107.           name: 'common',
108.           chunks: 'all',
109.           minChunks: 2,
110.           minSize: 0,
111.           maxInitialRequests: 5 // The default limit is too small to showcase the effect
112.         }
113.       }
114.     },
115.     // 生成 manifest.js
116.     runtimeChunk: {
117.       name: 'manifest'
118.     }
119.   }

复制代码

总结 

如果改完可以正常启动，那么恭喜你！升级成功了！！如果不幸失败了，那么。。。很歉仄没有给你提供有效的帮助（哭），你也可以留言或私信，我看看有没有遇到雷同报错。希望我的履历能帮助你在升级Vue2项目到Webpack 4的过程中少走弯路！



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。