2017-09-09 4 views
1

はホットロードが設定

yarn add [email protected] 

は、エントリポイントを更新し、最新の反応ホット・ローダーをインストールした後でも動作しませんリアクト:

{ 
    test: /.jsx?$/, 
    loader: 'babel-loader', 
    include: path.resolve(__dirname, 'src'), 
    exclude: /node_modules/, 
    options: { 
     presets: [['es2015', { modules: false }], 'react'], 
     plugins: ['react-hot-loader/babel'] 
    } 
}, 

追加HMRプラグイン

plugins: [ 
    new CopyWebpackPlugin([ 
     { from: 'src/index.html' } 
    ]), 
    new WriteFilePlugin(), 
    new webpack.HotModuleReplacementPlugin() 
], 

使用済みAppContainer

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { AppContainer } from 'react-hot-loader'; 
import Home from './components/home'; 

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

render(Home); 

if (module.hot) { 
    module.hot.accept('./components/home',() => render(Home)); 
} 

そして、まだ動作しません。ページは完全なリロードを行います。

答えて

0

[OK]を1時間のグーグルと読書の後、これを見てください。上記のWebPACK 2とすると、以下の設定がdevServerに追加する必要があります。

--hotフラグのいずれかを使用してください:私は呼ばearlier Webpack documentation

devServer: { 
    contentBase: path.join(__dirname, 'dist'), 
    hot: true 
} 

、それはこの提案、または のHotModuleReplacementPluginをwebpack.config.jsに入れてください。ただし、その場合は同時に と同時に、HMRプラグインは実際には になり、セットアップが中断されます。