關於 npm audit 引起的坑

利用vue-cli搭建了一個關於在線學習英語視頻的網站，在項目運行的過程當中，經常會看到終端有一個提示：

found 2 vulnerabilities (1 low, 1 high)
run 'npm audit fix' to fix them, or 'npm audit' for details

百度搜索瞭解到，npm audit 是npm 6 新增的一個命令,能夠容許開發人員分析複雜的代碼並查明特定的漏洞。出於好奇，執行 npm audit fix，發現並無能自動的幫我 fix 掉這些錯誤。

fixed 0 of 2 vulnerabilities in 1295 scanned packages
2 package updates for 5 vulns involved breaking changes
(use `npm audit fix --force` to install breaking changes; or do it by hand)

根據提示嘗試執行 npm audit fix --force，接着就是各類報錯（心塞塞）
首先，是Connot find module ‘webpack-cli/bin/config -yargs’（應該是剛剛的命令把webpack-dev-server升級了），查看package.json，發現webpack（3.xx）和webpack-dev-server（3.xx）版本不兼容，webpack須要更新爲4.xx版本，因而卸載了webpack：npm uninstall webpack，再從新安裝 npm i webpack webpack-cli -D(webpack4.xx以上須要安裝webpack-cli)。

接着就是，TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function；這是html-webpack-plugin版本不兼容，因而將html-webpack-plugin升級爲最新版：npm i html-webpack-plugin@next -D

接着又報錯：vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
提示webpack4配置須要包含VueLoaderPlugin

const VueLoaderPlugin = require('vue-loader/lib/plugin')
而後在輸出裏面配置plugins：

plugins: [
    new VueLoaderPlugin()
]

做爲前端小白，有些錯誤也不太明白，靠着網上各位熱心大神，終於決定退回webpack3的版本（/捂臉/捂臉），終於再也不報錯了 2333，等我技術長進一些再來研究研究。爲此，整理一些webpack4的踩坑文章，方便下次學習。感謝！

https://segmentfault.com/a/11...
https://blog.csdn.net/qq_1655...
https://blog.csdn.net/harsima...