如何解决Webpack Hot Module Replacement (HMR) 工作，但浏览器缓存并一次执行所有更新 app/package.jsonapp/dev/index.jsapp/public/index.htmlwebpack-main.jsdocker-compose.yml

这是一个简单的节点/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