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

相关推荐