这是一个简单的节点/webpack 应用程序： https://github.com/Tech-Nomad/docker-node-hmr-testing
一切正常，只是每次我在 app/dev/index.js 中更改某些内容时，这些更改都会累加到浏览器中执行的脚本中，而不是实际替换。
在我的测试应用程序中，我在文档内部单击，一个彩色 div 将被添加到 body 标签中。首先它的背景颜色是青色。当你在 app/dev/index.js 中将 classname 更改为“purple”，然后再次在浏览器中单击文档时，将添加一个青色 div 和一个紫色 div（总共三个 div）。当您随后将 classname 更改为“aqua”并在文档中再次单击时，您现在每次单击都会获得三个额外的 div（青色、紫色、浅绿色）。等等。
有人知道我的 webpack 配置有什么问题吗？
第一次点击后：
第二次点击后：
第三次点击后：
这里是github存储库中的所有相关文件：
app/package.json
{
"scripts": {
"start": "NODE_ENV=dev webpack serve --config webpack-main.js --progress --profile"
},"devDependencies": {
"webpack": "^5.35.1"
},"dependencies": {
"clean-webpack-plugin": "*","express-static": "^1.2.6","webpack-cli": "^4.6.0","webpack-dev-server": "^3.11.2"
}
}
app/dev/index.js
//https://medium.com/@larrybotha/great-article-4d0eb79a61a6
if (module.hot) {
module.hot.accept();
}
document.addEventListener("click",function () {
let newDiv = document.createElement("div");
newDiv.classname = "cyan";
document.body.appendChild(newDiv);
});
app/public/index.html
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<style>
body{
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width:100vw;
min-height: 100vh;
}
div{
width: 100px;
height: 100px;
margin: 1rem;
}
.aqua{
background: aqua ;
}
.purple{
background: rebeccapurple ;
}
.cyan{
background: darkcyan;
}
</style>
<script src="/assets/main.bundle.js"></script>
</head>
<body>
</body>
</html>
webpack-main.js
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: "development",entry: {
main: './dev/index.js',},devtool: 'inline-source-map',devserver: {
contentBase: './public',hot: true,hotOnly: true,writeToDisk: true,host: '0.0.0.0',port: 8080,public: "https://localhost:9000",https: true,disableHostCheck: true,plugins: [
new webpack.HotModuleReplacementPlugin(),new CleanWebpackPlugin()
],output: {
filename: '[name].bundle.js',path: path.resolve(__dirname,'public/assets'),clean: true,};
docker-compose.yml
version: '3.8'
services:
node:
image: node:15.14.0-buster
container_name: testing_hmr
working_dir: /home/node/app
environment:
- NODE_ENV=dev
ports:
- "9000:8080"
volumes:
- ./app:/home/node/app