Vue 項目升級到 webpack4.x 小紀【附代碼】

自 webpack 4.x 發佈以來，就獨得碼農恩寵。我公司的項目是基於 webpack 3.x 版本的 vue 項目， 當時是用 vue-cli 工具構建的項目，項目開發完成後發現打包性能低下，並且項目是多頁面的，須要將 打包文件分離，webpack 原有的 CommonsChunkPlugin 插件難以知足須要，想用 SplitChunksPlugin 替換它，因而開始了折磨人的升級過程。

現將本身的升級過程記錄以下，但願能給須要升級 vue 項目的朋友一點參考價值。

升級後的代碼

第一步：用 vue-cli 工具建立一個簡單的 vue webpack 項目

vue init webpack vue-webpack4-v2
複製代碼

打開 package.json 文件，查看 webpack 版本信息, 發現 webpack 仍是 3.x 版本

"webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
複製代碼

第二步： 升級 npm 包

因爲要升級的包不少，一個個操做起來麻煩，因此建議用npm-check工具來檢查和更新包版本。

因爲手動更新太麻煩，能夠運行 npm-check -u 命令批量更新 npm 包

需新增的包：

• "webpack-cli": "^3.1.0"
• "mini-css-extract-plugin": "^0.4.1"

需刪除的包（webpack 配置中引用該包的插件也要刪除）:

• "extract-text-webpack-plugin": "^3.0.0"
• "uglifyjs-webpack-plugin": "^1.1.1"
• "optimize-css-assets-webpack-plugin": "^5.0.0"

注意：

• "eslint": "^5.3.0" 版本號不宜過高，改爲 "^4.0.0"

第三步： webpack 配置升級

參考官方升級文檔 To v4 from v3

主要修改 build/webpack.xxx.conf.js 文件

第四步：vue-loader 配置升級

參考官方升級文檔 從 v14 遷移

主要修改 build/vue-loader.conf.js 和 build/webpack.xxx.conf.js 文件

注意：

• 去除掉 build/webpack.prod.conf.js 中的 OptimizeCSSPlugin 插件

總結

通過上面四步，基本上能將項目成功運行了，但本身能力有限，有些配置的原理也似懂非懂，但成長的過程就是要勇於不斷的 失敗和嘗試，這樣才能一步步從陌生到熟悉。正所謂」路漫漫其修遠兮，吾將上下而求索「。

參考

• Vue項目升級到Webpack 4.x初步踩坑總結
• Vue Cli 3.0 已發佈，採用 webpack 4.x，不再用本身升級了