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

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