網(wǎng)上教程很多，魚龍混雜，看了一臉懵逼郁岩，記錄一下自己在升級過程中遇到的一些問題。建議遇到了webpack插件問題逐行去看一下webapck里關(guān)于此插件的文檔（盡量看英文文檔芙盘，不懂得有道翻譯驯用，中文文檔更新落后太多，容易有坑）儒老。
首先需要升級你的webpack和安裝webpack-cli蝴乔。然后把package.json的包升級一下，過程就不描述了驮樊，自己去升級薇正。 建議安裝npm-check，來檢測安裝所有的依賴包囚衔。
1挖腰、npm install -g npm-check
2、npm-check -u -g?全局更新包 (全局目錄)?通過上下鍵可以移動(dòng)光標(biāo)练湿，使用空格鍵可以選擇需要處理的包猴仑，回車直接進(jìn)行處理
3、npm-check -u??更新某個(gè)項(xiàng)目的包 （項(xiàng)目目錄）建議使用這個(gè)?通過npm-check -u?就可以肥哎，不需要--save就可以直接更新package.json里面的內(nèi)容
升級webpack和webapck-cli并且成功升級好npm包之后辽俗。還需要去修改一下build里的webpack.dev.conf.js? webpack.prod.conf.js utils.js里的配置。下面詳細(xì)介紹：
一篡诽、開發(fā)環(huán)境改動(dòng)不多崖飘，改幾個(gè)配置就好了。
mode 設(shè)置為 development
rules: vue-cli引用的是utils里的styleLoaders工具函數(shù)杈女，這里面有些loader和插件要改一下朱浴。
webpack4.x里用'mini-css-extract-plugin''替換extract-text-webpack-plugin'，utils.js的generateLoaders函數(shù)需要改一下：生產(chǎn)環(huán)境使用min-css-extract-plugin达椰，開發(fā)環(huán)境用vue-style-loader翰蠢。
二、生產(chǎn)環(huán)境配置
在webpack.prod.conf.js里面把這兩個(gè)插件引入啰劲。mini是用來把css單獨(dú)抽離成一個(gè)個(gè)css的躏筏，opti是用來在生產(chǎn)環(huán)境把css壓縮，去除無效冗余代碼和注釋的呈枉。
引入后在plugins注冊這兩個(gè)插件趁尼。
Since webpack v4, the?CommonsChunkPlugin?was removed in favor of?optimization.splitChunks.
webpack4開始官方移除了commonchunk插件埃碱，改用了optimization屬性進(jìn)行更加靈活的配置。
其中最重要的是需要配置splitChunks和runtimeChunk酥泞。webpack4會(huì)在如下情況下會(huì)自動(dòng)的啟用放分割chunk塊：
1砚殿、可以共享新塊，或者模塊來自node_modules文件夾
2芝囤、新塊將大于30kb(在min+gz之前)
3似炎、當(dāng)按需加載塊時(shí)，并行請求的最大數(shù)量將小于或等于5
4悯姊、初始頁面加載時(shí)并行請求的最大數(shù)量將小于或等于3
webpack4.3 optimization的配置
至此羡藐，vue-cli3升級webpack4.3成功，可以正常在開發(fā)環(huán)境和生產(chǎn)環(huán)境運(yùn)行成功悯许。
