Webpack4升級踩坑記錄

1. 升級webpack到4以上版本，如：yarn upgrade [email protected]，如果提示錯誤然後運行yarn install安裝package.json裏所有包，並將包及它的所有依賴項保存進yarn.lock，運行後可能會出現的報錯是
   該問題是vue-cli腳手架的一個bug，原因是chromedriver的部分文件被國內網絡給牆掉了，無法下載完整的chromedirver包，需要運行npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
   運行成功之後，繼續運行yarn，接着運行yarn upgrade [email protected]就不會出現問題了，這時webpack就已經升級到了4.6.0版本

2. 繼續npm run dev跑一下項目又出現報錯
   這個報錯的原因是因爲html-webpack-plugin插件報錯，是因爲當前版本過低的原因造成的，需要對該插件進行升級，運行npm install --save-dev html-webpack-plugin，這也是我在網上搜的更新方式，不過還是沒有成功，原因好像是存在緩存，如果沒有成功就先運行npm cache clean --force，然後運行npm install --save-dev html-webpack-plugin，這樣就不會出現這個錯誤，運行後又出現了錯誤，
   解決辦法是在build / webpack.base.conf.js中，

   // const createLintingRule = () => ({
   // test: /.(js|vue)$/,
   // loader: ‘eslint-loader’,
   // enforce: ‘pre’,
   // include: [resolve(‘src’), resolve(‘test’)],
   // options: {
   // formatter: require(‘eslint-friendly-formatter’),
   // emitWarning: !config.dev.showEslintErrorsInOverlay
   // }
   // })

註釋掉，再找到module 中的 …(config.dev.useEslint ? [createLintingRule()] : []),也註釋掉，然後重新運行cnpm run dev即可解決eslinet報錯問題
3. 繼續運行有報錯
這個錯誤的原因是原來是項目中的vue-loader插件破壞了，需要重新安裝vue-loader，運行npm install vue-loader@latest --save-dev ,安裝vue-loader後即可
4. 繼續報錯
在報錯的最後有一句vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.大意是：沒有相應的插件使用VUE加載器。請確保在WebPACK配置中包含VueloDelpLuin。 找到文件\build\webpack.dev.conf.js
添加代碼const { VueLoaderPlugin } = require(‘vue-loader’);

plugins: [
    // 添加代碼2 VueLoaderPlugin
    new VueLoaderPlugin(),
    ]

運行npm run dev成功了!