Webpack 2 + React Hot Loader无法正常工作

Question

我正在尝试让Webpack 2 + React Hot Loader正常工作，但似乎并未重新加载。它正确呈现网页，但是随时对“App.js”文件进行任何更改，它都不会执行任何操作。

webpack.config.json

var path = require('path'); 
var webpack = require('webpack'); 
module.exports = { 
    entry: { 
    'app': [ 
     'react-hot-loader/patch', 
     path.join(__dirname, 'src/main.js') 
    ] 
    }, 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     } 
    ] 
    } 
}; 

.babelrc

{ 
    "presets": [ 
    ["env", {"modules": false}], 
    "react" 
    ], 
    "plugins": [ 
    "transform-object-rest-spread" 
    ] 
} 

的package.json

{ 
    "main": "main.js", 
    "scripts": { 
    "dev": "webpack-dev-server --inline --hot" 
    }, 
    "dependencies": { 
    "express": "^4.15.2", 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babel-plugin-transform-object-rest-spread": "^6.23.0", 
    "babel-polyfill": "^6.23.0", 
    "babel-preset-env": "^1.4.0", 
    "babel-preset-react": "^6.24.1", 
    "react-hot-loader": "next", 
    "webpack": "^2.4.1", 
    "webpack-dev-server": "^2.4.4" 
    } 
} 

我跑webpack-dev-server通过CLI使用--hot和--inline标志。

main.js

import React from 'react' 
import ReactDOM from 'react-dom' 
import { AppContainer } from 'react-hot-loader' 

import App from './containers/App' 

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

render(App) 

if(module.hot) { 
    module.hot.accept(); 
} 

App.js

import React, { Component } from 'react' 

export default class App extends Component { 
    render() { 
    return (
     <div> 
     <div className="container"> 
      <h1>Testing</h1> 
     </div> 
     </div> 
    ) 
    } 
} 

因此，为了测试它，我要跑yarn dev和服务器将启动。一切编译和webpack将输出webpack: Compiled sucessfully。但是，对App.js所做的任何更改都不会重新加载网页。在网页本身控制台只输出这样的：

[HMR] Waiting for update signal from WDS... 
bundle.js:15580 [WDS] Hot Module Replacement enabled. 

我想在这里（https://github.com/webpack/webpack-dev-server/issues/100）中列出的各种方法，但没有人似乎工作。

Answer 1

您main.js尝试改变这一点：

if(module.hot) { 
    module.hot.accept(); 
} 

这样：

if (module.hot) { 
    // Enable Webpack hot module replacement for Component 
    module.hot.accept('./containers/App',() => { 
     render(App); 
    }); 
    } 

您可以在docs

编辑看到一个更详细的例子：
按照文档例如，您需要拨打render拨打accept 。

也许看看webpack config以及。