反應熱裝載機仍然重裝不HMR

Question

我有webpack.config.js如以下所示，使用npm run dev，運行webpack-dev-server每當檢測到更改仍然導致硬重裝不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

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

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