記錄一次webpack3升級到webpack4過程

       升級以前也參考了一些網上的教程。借鑑之，進行的本身的升級。一些版本爲何設爲那個版本號也是參考別人的結果。

       總體是按照先升級npm run dev；在升級npm run build的順序。

       首先升級webpack，在package.json文件中將webpack版本號修改成4.8.1。

    "webpack": "^4.8.1",

　　以後npm run dev，報錯

     解決的辦法是

"webpack-dev-server": "^3.1.4",

　繼續npm run dev 

    很明顯這是沒有安裝webpack-cli，安裝webpack

"webpack-cli": "^3.3.7",

　 繼續npm run dev

      由於項目運用了DllReferencePlugin，升級以後須要從新生成dll文件。以後由於webpack4自身已經移除了uglifyjsplugin因此不能用了，改用下面插件進行代碼壓縮。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

　　修復後，npm run dev

       解決方案升級 html-webpack-plugin

"html-webpack-plugin": "^3.2.0",

      webpack4 須要使用vue-loader 15.0.0 至少。因此升級vue-loader

"vue-loader": "^15.0.10",

　  注意vue-loader須要以插件的形式寫在webpack配置項plugin裏面。

const { VueLoaderPlugin } = require('vue-loader')
webpack:{
  ....,
 plugins: [
    new VueLoaderPlugin(),
    .....
   ]
}

　ok,npm run dev升級完畢。

    注意這裏版本號雖然，如上來寫，但須要劉傑"^"這個符號的意義，意義是大版本號不變，中間版本號會自動下載最新的。還有一個符號"~",是隻小版號變化。

    而後升級npm run build。

    webpack 4 不能再用extract-text-webpack-plugin，大多數教程推薦使用mini-css-extract-plugin，這個能夠百度。用這個插件替換build環境的extract-text-webpack-plugin便可。

    其餘：升級過程當中還出現的問題有

      這是由於eslint須要升級，升級到eslint-loader

 "eslint-loader": "^2.0.0",

　　

      這是由於使用了elment-ui，當升級到2.11.x時候會出現這個錯誤，這個錯誤最終沒有解決， 只有降級element-ui版本。