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',
}

經測試，生產環境開發環境都可以正常運作。