![1dd0faf10478197982851637cfb4667d.png](https://i-blog.csdnimg.cn/blog_migrate/316f21235d57604fbc3d43ceb67b9839.jpeg)
最近 wepack 又迎来了一次大更新,从 wepack4.x/webpack-cli 3.x 的搭配升级到了 webpack5.x/webpack4.x,在使用上碰到了一些踩坑,做一个小总结:
webpack-dev-server
1、webpack-dev-server为你提供了一个简单的 web 服务器,并且能够实时重新加载。这个可能是使用时报错最多的了,因为在 4/3 的年代,webpack启动热更新都是通过
"scripts": {
"serve": ""webpack-dev-server --open""
}
这种方式来使用,而在 5/4 的版本中,因为 wepack-cli 的项目目录修改了,如果还这么使用就会报错 Error: Cannot find module 'webpack-cli/bin/config-yargs',所以这个时候一方面可以通过版本降级来处理,另一方面可以通过新的方式:
"scripts": {
"serve": ""webpack serve --open""
}
2、与 browserslist 冲突导致热更新失效,解决方案同样可通过版本降级,或者是 target: process.env.NODE_ENV === "development" ? "web" : "browserslist",
来在开发阶段使得 browserslist 失效
html-webpack-plugin
使用 html-webpack-plugin 首先得注意他会与 html-loader 冲突,所以在使用 html-webpack-plugin 的 template 模板的后缀不可以使用 .html, 另外一个 html-webpack-plugin 会有缓存问题,可以通过设置 cache: false 每次打包生成新的 html 文件
CopyWebpackPlugin
CopyWebpackPlugin 使用更新,内部使用
new CopyWebpackPlugin({
patterns: [{
from: 'public'
}, ],
})
vue-style-loader
这个 loader 已经两年没有更新了,官方推荐 style-loader 进行替代
file-loader
可能出现打包图片以后图片不能正常显示,查看元素可以发现 src 显示是 module,这是webpack他默认会以esmodule的形式打包,就被打包成一个模块,加上一个配置项即可
![f62f191b4b7afd359ef42217481ff795.png](https://i-blog.csdnimg.cn/blog_migrate/1bc6006ad5a0b9af599955abea81f530.png)