這篇文章給大家分享的是有關(guān)vue cli如何升級(jí)webapck4的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
webpack4 released 已經(jīng)有一段時(shí)間了，插件系統(tǒng)趨于平穩(wěn)，適逢對(duì)webpack3的打包速度很不滿意，因此決定將當(dāng)前在做的項(xiàng)目進(jìn)行升級(jí)，正好也實(shí)踐一下webpack4。
新特性
0配置
應(yīng)該是parcel出來(lái)以后，webpack團(tuán)隊(duì)意識(shí)到其配置確實(shí)有點(diǎn)復(fù)雜，不太容易上手。so, webapck4 開(kāi)始支持0配置啟動(dòng)。不過(guò)，萬(wàn)變不離其宗，webpack4的0配置也只是支持了默認(rèn)entry 和 output而已，即默認(rèn)entry為./src,默認(rèn)output為/dist。
模式選擇mode
mode有兩個(gè)可選項(xiàng)，production & development。作為必選項(xiàng)，mode是不可缺省的。在production模式下，會(huì)默認(rèn)做一些必要的優(yōu)化，如代碼壓縮和作用域提升，還會(huì)默認(rèn)指定process.env.NODE_ENV 為 production。在development模式下，優(yōu)化了增量構(gòu)建，支持注釋和提示，并且支持 eval 下的 source maps，同時(shí)默認(rèn)指定process.env.NODE_ENV 為 development。
sideEffects
通過(guò)該配置可以大幅度減小打包體積。當(dāng)模塊的 package.json 配置sideEffects:false表明該模塊沒(méi)有副作用，也就意味著 webpack 可以安全地清除被用于重復(fù)導(dǎo)出(re-exports)的代碼。
模塊類(lèi)型
webpack4提供了5種模塊類(lèi)型。
json: 可通過(guò) require 和 import 導(dǎo)入的 JSON 格式的數(shù)據(jù)(默認(rèn)為 .json 的文件)
webassembly: WebAssembly 模塊，（目前是 .wasm 文件的默認(rèn)類(lèi)型）
javascript/auto: (webpack 3中的默認(rèn)類(lèi)型)支持所有的JS模塊系統(tǒng)：CommonJS、AMD。
javascript/esm: EcmaScript模塊（默認(rèn) .mjs 文件）。
javascript/dynamic: 僅支持 CommonJS & AMD。
JSON
webpack 4 不僅支持本地處理 JSON，還支持對(duì) JSON 的 Tree Shaking。當(dāng)使用 ESM 語(yǔ)法 import json 時(shí)，webpack 會(huì)消除掉JSON Module 中未使用的導(dǎo)出。此外，如果要用 loader 轉(zhuǎn)換 json 為 js，需要設(shè)置 type 為 javascript/auto。
optimization
Webpack 4 刪除了 CommonsChunkPlugin，并默認(rèn)啟用了它的許多功能。因此webpack4可以實(shí)現(xiàn)很好的默認(rèn)優(yōu)化。但是，對(duì)于那些需要自定義的緩存策略，增加了 optimization.splitChunks 和 optimization.runtimeChunk。具體解釋可參考這篇文章，解釋得很詳細(xì)。RIP CommonsChunkPlugin點(diǎn)擊預(yù)覽
。
手把手升級(jí)
我是把原來(lái)vue cli的項(xiàng)目做了一下升級(jí)，總體來(lái)說(shuō)，升級(jí)還算是比較順利步驟，這里我們分成兩步走，首先升級(jí)相關(guān)依賴的插件，然后優(yōu)化webapck配置文件。
升級(jí)插件
首先要把下面列表的插件升級(jí)到對(duì)應(yīng)版本或者最新版本
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
如果遇到其他包報(bào)錯(cuò)，應(yīng)該是升級(jí)到最新的就可以解決了。
更新配置文件
webpack.dev.conf.js
dev環(huán)境變化不大，畢竟webpack4很大一部分的優(yōu)化都是針對(duì)生產(chǎn)環(huán)境的，該文件我們只需要?jiǎng)h除一些不再需要的插件既可以。例如：webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin，其功能webpack4已經(jīng)默認(rèn)配置。同時(shí)，要設(shè)置
mode: 'development'
webpack.production.conf.js
webvpack4中改動(dòng)大，影響也大的就是webpack4使用optimization.splitChunks替代了CommonsChunkPlugin。以前的CommonsChunkPlugin主要用來(lái)抽取代碼中的共用部分，webpack runtime之類(lèi)的代碼，結(jié)合chunkhash，實(shí)現(xiàn)最好的緩存策略。而optimization.splitChunks則實(shí)現(xiàn)了相同的功能，并且配置更加靈活，具體解釋可參考這篇文章，解釋得很詳細(xì)。
重慶分公司
重慶分公司
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' }
}感謝各位的閱讀！關(guān)于“vue cli如何升級(jí)webapck4”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
