vue cli如何升級webapck4

這次帶給大家vue cli如何升級webapck4，vue cli升級webapck4的注意事項有哪些，以下就是實戰案例，一起來看一下。

webpack4 released 已經有一段時間了，插件系統趨於平穩，適逢對webpack3的打包速度很不滿意，因此決定將目前在做的項目進行升級，正好也實踐一下webpack4。

新特性

0配置

應該是parcel出來以後，webpack團隊意識到其配置確實有點複雜，不太容易上手。 so, webapck4 開始支援0配置啟動。不過，萬變不離其宗，webpack4的0配置也只是支援了預設entry 和 output而已，即預設entry為./src,預設output為/dist。

模式選擇mode

mode有兩個可選項，production & development。作為必選項，mode是不可缺省的。在production模式下，會預設做一些必要的最佳化，如程式碼壓縮和作用域提升，也會預設指定process.env.NODE_ENV 為 production。在development模式下，優化了增量構建，支援註解和提示，並且支援 eval 下的 source maps，同時預設指定process.env.NODE_ENV 為 development。

sideEffects

透過此配置可以大幅減小打包體積。當模組的 package.json 配置sideEffects:false顯示該模組沒有副作用，也就意味著 webpack 可以安全地清除被用於重複導出(re-exports)的程式碼。

模組類型

webpack4提供了5種模組類型。

1. json: 可透過require 和import 匯入的JSON 格式的資料(預設為.json 的檔案)

2. webassembly: WebAssembly 模組，（目前是.wasm 檔案的預設型別）

3. javascript/auto: (webpack 3中的預設型別)支援所有的JS模組系統：CommonJS、AMD。

4. javascript/esm: EcmaScript模組（預設 .mjs 檔案）。

5. javascript/dynamic: 僅支援 CommonJS & AMD。

JSON

webpack 4 不僅支援本地處理 JSON，也支援 JSON 的 Tree Shaking。當使用 ESM 語法 import json 時，webpack 會消除掉JSON Module 中未使用的匯出。另外，如果要用 loader 轉換 json 為 js，需要將 type 設定為 javascript/auto。

optimization

Webpack 4 刪除了 CommonsChunkPlugin，並且預設啟用了它的許多功能。因此webpack4可以實現很好的預設最佳化。但是，對於那些需要自訂的快取策略，增加了 optimization.splitChunks 和 optimization.runtimeChunk。具體解釋可參考這篇文章，解釋得很詳細。 RIP CommonsChunkPlugin點擊預覽
。

手把手升級

我是把原來vue cli的專案做了一下升級，整體來說，升級還算是比較順利步驟，這裡我們分成兩步驟走，先升級相關依賴的插件，然後優化webapck設定檔。

升級外掛程式

首先要把下面清單的外掛程式升級到對應版本或最新版本

webpack@4.4.1
css-loader@0.28.10,
extract-text-webpack-plugin@4.0.0-beta.0,
file-loader@1.1.11,
html- webpack-plugin@3.1.0,
optimize-css-assets-webpack-plugin@4.0.0,
url-loader@1.0.1,
vue-loader@14.2.2,
vue-style-loader@4.1.0,
vue-template-compiler@2.5.16,
webpack-bundle-analyzer@2.11.1,
webpack-dev-middleware@3.1.0,
webpack-dev-server@3.1.1,
webpack-hot-middleware@2.21.2

如果遇到其他套件報錯，應該是升級到最新的就可以解決了。

更新設定檔

webpack.dev.conf.js

#

dev环境变化不大，毕竟webpack4很大一部分的优化都是针对生产环境的，该文件我们只需要删除一些不再需要的插件既可以。例如：webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin，其功能webpack4已经默认配置。同时，要设置

mode: 'development'
webpack.production.conf.js

webvpack4中改动最大，影响也最大的就是webpack4使用optimization.splitChunks替代了CommonsChunkPlugin。以前的CommonsChunkPlugin主要用来抽取代码中的共用部分，webpack runtime之类的代码，结合chunkhash，实现最好的缓存策略。而optimization.splitChunks则实现了相同的功能，并且配置更加灵活，具体解释可参考这篇文章，解释得很详细。

mode: 'production',
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
chunks: 'initial',
name: 'vendors',
},
'async-vendors': {
test: /[\\/]node_modules[\\/]/,
minChunks: 2,
chunks: 'async',
name: 'async-vendors'
}
}
},
runtimeChunk: { name: 'runtime' }
}

总结

总体来说本次升级还算顺利，不到一天搞定，目前感觉，打包速度大约优化了70%左右，同时打包后的代码体积也有了很大的优化，带来的效果很显著的。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue.js动态操作同级class

D3.js实现动态表盘效果

以上是vue cli如何升級webapck4的詳細內容。更多資訊請關注PHP中文網其他相關文章！