Javascript 网页包热中间件'；t删除元素，但在刷新时添加新元素

我试图为一个项目制作一个快速的样板文件，但在重新加载页面时遇到了一个问题

我在我的

app.js

中有这段代码：

import * as d3 from 'd3'

import { Hello } from './component'
import css from './styles.css'

function Greetings( name ) {
  d3.select('body')
    .append('h1')
    .html(Hello(name))
}
Greetings('John')

// HMR live reload
if (module.hot) {
  module.hot.accept();
}

当我启动页面时，我可以看到添加到DOM中的

H1

，但是当我进行更改时（例如，

问候语

给Marie的参数），它不会更新当前的参数，而是添加一个新元素等等

所以我的DOM中有：

<h1>Hello John</h1>
<h1>Hello Marie</h1>

<h1>Hello Marie</h1>

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry : [
    'webpack-hot-middleware/client',
    './src/app.js'
  ],
  output: {
    path: path.join(__dirname, '/dist'),
    publicPath: '/',
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },
      {
        test: /\.js$/,
        use : [
          {
            loader : 'babel-loader',
            options: {
              presets: ['env']
            }
          }
        ]
      },
    ]
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
}