react-hot-loader仍然没有加载HMR

Question

我有 webpack.config.js ，如下所示，使用webpack-dev-server运行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']
}

的package.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 official docs

Interesting issue