ホットモジュールの置き換え - 更新中ですが再レンダリングはしません

Question

webpack-dev-serverにバンドルされて提供されているReactアプリケーションのAPIとして動作するエクスプレスサーバを実行しています。

私が動作するようにホットモジュールの交換を取得しようと、ほとんどが午前、私は私のファイルに変更を加えたとき、私はコンソールでこれを取得しています：

しかし、アプリを再されることはありません - 手動で更新されない限り、レンダリングされます。これが関係しているかどうかはわかりませんが、.scssファイルを更新すると、手動で更新せずに最新の状態に更新されます。

バージョン：

"webpack": "2.1.0-beta.22"

"webpack-dev-server": "2.1.0-beta.8"

"react-hot-loader": "3.0.0-beta.5"

私は、最新のWebPACKをしようとしたが、それは私に克服することができませんでした検証エラーを与えました。

私はWebpack経由で"webpack": "webpack-dev-server --port 4000 --env.dev"を実行しています。エクスプレスサーバはhttp://localhost:3000で実行されています。

は、ここに私のwebpack.config.babel.jsである：ここでは

const webpack = require('webpack'); 
const { resolve, join } = require('path'); 
const { getIfUtils, removeEmpty } = require('webpack-config-utils') 

const getEntry = (ifDev) => { 
    let entry 

    if (ifDev) { 
    entry = { 
     app: [ 
     'react-hot-loader/patch', 
     'webpack/hot/dev-server', 
     'webpack-dev-server/client?http://localhost:4000/', 
     './js/index.js' 
     ], 
     vendor: ['react'] 
    } 
    } else { 
    entry = { 
     bundle: './js/index.js', 
     vendor: ['react'] 
    } 
    } 

    return entry 
} 

const config = env => { 
    const { ifProd, ifDev } = getIfUtils(env) 

    return { 
    entry: getEntry(ifDev), 
    output: { 
     path: resolve('./public/dist/'), 
     publicPath: 'http://localhost:4000/', 
     filename: '[name].bundle.js', 
    }, 
    context: resolve(__dirname, 'assets'), 
    devtool: env.prod ? 'source-map' : 'eval', 
    devServer: { 
     contentBase: resolve('./public/dist/'), 
     headers: { 'Access-Control-Allow-Origin': '*' }, 
     publicPath: 'http://localhost:4000/', 
     hot: true, 
     noInfo: true, 
     inline: true 
    }, 
    bail: env.prod, 
    module: { 
     loaders: [ 
     { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ], exclude: /node_modules|lib/ }, 
     { test: /\.(js|jsx)$/, exclude: /node_modules/, loaders: [ 'babel-loader' ] }, 
     { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader' } 
     ] 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    plugins: removeEmpty([ 
     ifDev(new webpack.NoErrorsPlugin()), 
     ifDev(new webpack.NamedModulesPlugin()), 
     ifDev(new webpack.HotModuleReplacementPlugin()), 

     new webpack.DefinePlugin({ 
     'process.env': { NODE_ENV: JSON.stringify((env.prod) ? 'production' : 'development') } 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     minChunks: Infinity, 
     filename: 'vendor.bundle.js' 
     }), 

     ifProd(new webpack.LoaderOptionsPlugin({ 
     minimize: true, 
     debug: false 
     })), 
     ifProd(new webpack.optimize.UglifyJsPlugin({ 
     compress: { warnings: false }, 
     output: { comments: false }, 
     sourceMap: false 
     })) 
    ]), 
    } 
} 

module.exports = config 

私.babelrcで、私はstyle-loaderがいることをサポートしているので、HMRはCSSのために自動的に動作react-hot-loader

{ 
    "presets": [["es2015", { modules: false }], "stage-0", "react"], 
    "plugins": ["react-hot-loader/babel"], 
    "env": { 
    "test": { 
     "plugins": ["istanbul"], 
     "presets": ["es2015", "stage-0", "react"] 
    } 
    }, 
    "sourceMaps": "inline" 
} 

Answer 1

ホットローダーV3を反応させ、バベル変換しますHot Loaderの新しいバージョンでは、ホットアップデートをmodule.hot.acceptで明示的に受け入れる必要があります。

/** 
* Starts the React app with the Router, and renders it to the given DOM container 
* @param {DOMElement} container 
*/ 
export default function app(container) { 
    const store = createStore(
    combineReducers({ 
     ...reducers, 
     routing: routerReducer, 
     form: formReducer, 
    }), 
    compose(
     applyMiddleware(
     routerMiddleware(hashHistory), 
     thunkMiddleware, 
     promiseMiddleware 
    ), 
     process.env.NODE_ENV !== 'production' && window.devToolsExtension ? window.devToolsExtension() : (param) => param 
    ) 
); 

    if (module.hot) { 
    module.hot.accept('./reducers',() => { 
     const nextReducers = require('./reducers'); 
     const nextRootReducer = combineReducers({ 
     ...nextReducers, 
     routing: routerReducer, 
     form: formReducer, 
     }); 
     store.replaceReducer(nextRootReducer); 
    }); 
    } 

    const history = syncHistoryWithStore(hashHistory, store); 

    render({ store, history, container }); 

    store.dispatch(loadEventsWhenLoggedIn()); 

    if (module.hot) { 
    module.hot.accept('./render',() => { 
     const newRender = require('./render').default; 
     newRender({ store, history, container }); 
    }); 
    } 
} 

（およびレンダリング：あなたはこのような何かを行うことができ（ルーティングとホットリロードレデューサー付き）、より複雑なReduxのプロジェクトで

。より多くの例についてはJS）

/** 
* Starts the React app with the Router, and renders it to the given DOM container 
* @param {DOMElement} container 
*/ 
export default function render({ store, history, container }) { 
    ReactDOM.render(
    <Provider store={store}> 
     <div className='container'> 
     <Routes history={history} store={store} /> 
     </div> 
    </Provider>, 
    container 
); 
} 

あなたはダン・アブラモフ監督のReduxのは、例のレポをデベロッパーツールを見ている必要があり、例えば、このファイル：https://github.com/gaearon/redux-devtools/blob/master/examples/todomvc/index.js

Answer 2

を呼び出すところすぐに。

実際にはそうではありません。 react-hot-loaderが必要です。

はNPMでそれをインストールし、これを変更：

{ test: /\.(js|jsx)$/, exclude: /node_modules/, loaders: [ 'babel-loader' ] }, 

へ：

{ test: /\.(js|jsx)$/, exclude: /node_modules/, loaders: [ 'react-hot-loader', 'babel-loader' ] }, 

あなたが詳細をお知りになりたい場合は、私が "Webpack’s HMR & React-Hot-Loader — The Missing Manual" を読むことをお勧めします。で

render(
    <AppContainer> 
    <Root 
     store={ store } 
    /> 
    </AppContainer>, 
    document.getElementById('root') 
); 

if (module.hot) { 
    module.hot.accept('./containers/Root',() => { 
    const RootContainer = require('./containers/Root').default; 
    render(
     <AppContainer> 
     <RootContainer 
      store={ store } 
     /> 
     </AppContainer>, 
     document.getElementById('root') 
    ); 
    }); 
} 

：あなたのコンポーネントのルート（あなたがあなたのレンダリングを行うか、どこがあなたのReduxのプロバイダを作成する場所）でこれをやりたい、と