webpack-dev-server - react-hot-loader 仍然重新加载而不是 HMR

Question

我有如下所示的webpack.config.jswebpack-dev-server ，运行using npm run dev，每当检测到更改时，它仍然会导致硬重新加载而不是 HMR

求大神指点，哪里出错了，谢谢

webpack.config.js

const path = require('path')
const webpack = require('webpack')

module.exports = {
    entry: [
        'webpack-dev-server/client?http://0.0.0.0:8080',
        'webpack/hot/only-dev-server',
        path.resolve(__dirname, 'src', 'entry.js')
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: './dist',
        hot: true,
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                loader: 'babel-loader?cacheDirectory',
                exclude: /(node_modules)/
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),

        new webpack.NamedModulesPlugin(),
    ]
}

.babelrc

{
    presets: ['stage-0', 'es2015', 'react'],
    plugins: ['react-hot-loader/babel']
}

包.json

{
  "dependencies": {
    "react-hot-loader": "3.0.0-beta.6",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  },
  "scripts": {
    "dev": "webpack-dev-server"
  }
}

Answer 1

你在entry.js文件中使用module.hot.accept吗？：

import React from 'react';
import ReactDOM from 'react-dom'
import Navigation from './Navigation';

const rootEl = document.getElementById('root');
const render = Component => {
  ReactDOM.render(
   <Component/>,
   rootEl
  )
};

render(Navigation);

if (module.hot) {
  module.hot.accept('./Navigation', () => {
    render(Navigation)
  })
}

WebPack HMR 官方文档

有趣的问题