Express 网页包热模块替换（HMR）正在工作，但浏览器会立即缓存并执行所有更新

下面是一个简单的节点/网页包应用程序：

一切正常，只是每次我在app/dev/index.js中更改某些内容时，这些更改都会添加到浏览器中执行的脚本中，而不是实际替换

在我的测试应用程序中，我在文档内部单击，一个彩色div将添加到body标签中。首先，它的背景色是青色。当您在app/dev/index.js中将类名更改为“purple”，然后再次在浏览器中单击文档时，将添加一个青色div和一个紫色div（总共三个div）。然后，当您将类名更改为“aqua”并在文档中再次单击时，现在每次单击都会得到三个额外的div（青色、紫色、aqua）。等等

有人知道我的网页配置出了什么问题吗？ 第一次单击后：

第二次单击后：

第三次单击后：

这里是github存储库中的所有相关文件： app/package.json

{
“脚本”：{
“开始”：“NODE_ENV=dev webpack service--config webpack-main.js--progress--profile”
},
“依赖性”：{
“网页包”：“^5.35.1”
},
“依赖项”：{
“清理网页包插件”：“*”，
“快速静态”：“^1.2.6”，
“webpack cli”：“^4.6.0”，
网页包开发服务器“^3.11.2”
}
}

app/dev/index.js

//https://medium.com/@larrybotha/great-article-4d0eb79a61a6
如果（模块热）{
module.hot.accept（）；
}
document.addEventListener（“单击”），函数（）{
让newDiv=document.createElement（“div”）；
newDiv.className=“青色”；
文件.body.appendChild（newDiv）；
});

app/public/index.html

身体{
显示器：flex；
柔性包装：包装；
调整内容：灵活启动；
宽度：100vw；
最小高度：100vh；
}
div{
宽度：100px；
高度：100px；
保证金：1rem；
}
A.水{
背景：水；
}
紫色{
背景：丽贝卡紫；
}
.青色{
背景：darkcyan；
}

webpack-main.js

const path=require（'path'）；
const webpack=require（'webpack'）；
const{CleanWebpackPlugin}=require（'clean-webpack-plugin'）；
module.exports={
模式：“发展”，
条目：{
main:“./dev/index.js”，
},
devtool:“内联源映射”，
开发服务器：{
contentBase:“./public”，
热：是的，
是的，
writeToDisk:true，
主持人：“0.0.0.0”，
端口：8080，
公众：“https://localhost:9000",
https：是的，
disableHostCheck:true，
},
插件：[
新建webpack.HotModuleReplacementPlugin（），
新的CleanWebpackPlugin（）
],
输出：{
文件名：'[name].bundle.js'，
path:path.resolve（uu dirname，'public/assets'），
干净：是的，
},
};

docker-compose.yml

版本：“3.8”
服务：
节点：
图像：节点：15.14.0-buster
容器名称：测试
工作目录：/home/node/app
环境：
-节点_ENV=dev
端口：
- "9000:8080"
卷数：
-./app:/home/node/app