Question

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

我在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，但是当我进行更改时（例如Greetings的参数到 Marie ）它不会更新当前的元素但添加新元素等等。

所以我在我的DOM中：

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

而不是

<h1>Hello Marie</h1>

我真的不知道Hot Reload引擎盖下发生了什么，但它似乎并没有更新整个页面！

非常感谢任何帮助！

顺便说一句，这是我的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()
  ]
}

webpack-hot-middleware不会删除元素，但会在刷新时添加新元素

0 个答案: