2

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

我的代码中有这段代码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();
}

当我启动页面时，我可以看到H1添加到 DOM 中，但是当我进行更改时（例如Greetingsto Marie的参数），它不会更新当前页面，而是添加一个新元素等等。

所以我在我的 DOM 中有：

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

代替

<h1>Hello Marie</h1>

我真的不知道热重载的幕后发生了什么，但似乎它并没有更新整个页面！

任何帮助将不胜感激！

顺便说一句，这是我的 webpack.config 文件：

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()
  ]
}
4

0 回答 0