webpack 踩坑

最近 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的形式打包，就被打包成一个模块，加上一个配置项即可