Webpack Dev Server在热模块重新加载时复制元素

Question

我正在使用Preact设置一个项目并创建了我的webpack配置。但是，当我更新组件时，它会复制DOM中的元素而不是更新它。

我的webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(css|scss|sass)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Preact',
      template: './src/index.template.html',
      inject: true
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'src'),
    hot: true,
    port: 8000
  },
};

然后在我的./src/index.js文件中我有：

if (module.hot) {
  module.hot.accept();
}

导致此行为的原因是什么？