Webpack 2 + React Hot Loaderが動作しない

Question

Webpack 2 + React Hot Loaderを動作させようとしていますが、ホットリロードしていないようです。 Webページを正しくレンダリングしますが、「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には、--hotおよび--inlineフラグを付けてCLIを使用します。

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を変更してもWebページはリロードされません。 Webページ自体のコンソールはこれだけを出力します

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

私はここ（https://github.com/webpack/webpack-dev-server/issues/100）記載されている様々な方法を試みたが、それらのどれも動作するように見えません。これに

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

：ドキュメントによると
：

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

あなたはdocs

EDITでより詳細な例を参照することができ、あなたのmain.jsこれを変更してみてください上の

Answer 1

たとえば、acceptのコールバックでrenderに電話する必要があります。

多分webpack configを見てください。