webpack5热更新失效

开启热更新

config.devServer

{
+   hot: true,
}

config.plugins

[
+   new webpack.HotModuleReplacementPlugin(),
]

问题描述

开启热更新后，样式和 js 都无法热更新。

原因分析

项目根目录存在 .browserslistrc 文件，或者 package.json 存在 “browserslist”。

参考资料：

• https://webpack.js.org/configuration/target/#root
• https://www.cnblogs.com/min77/p/14693584.html

解决方式

config

{
+    arget: process.env.NODE_ENV === 'development' ? 'web' : 'browserslist',
}

经测试，生产环境开发环境都可以正常运作。