关于 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...