ホット・ローダーがブラウザに変更を表示していないことを確認してください

Question

この質問が以前に聞かれました。しかし誰も私のために働いていませんでした。私は、コードを変更すると、コンソールには[WDS]アプリのホットアップデート

...

を示していますが、私は、ブラウザで起こった変更を表示されません。最新のreact-hot-loader,webpack^2.2.0-rc.0、同バージョンのwebpack-dev-serverを使用しています。これは私が非同期ルーティングのためのルーティングにsystem.importsを使用しています

const VENDOR_LIBS = [ 
    'react', 'lodash', 'redux', 'react-redux', 'react-dom', 
    'react-input-range', 'redux-form', 'fabric' 
]; 

module.exports = { 
    entry: { 
    bundle: './src/index.js', 
    vendor: VENDOR_LIBS 
    }, 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: '[name].[chunkhash].js', 
    // publicPath: 'dist/' 
    }, 
    module: { 
     rules: [ 
     { 
      loader: ExtractTextPlugin.extract({ 
      loader: 'css-loader' 
      }), 
      test: /\.css$/, 
     }, 
     { 
      use: 'babel-loader', 
      test: /\.js$/, 
      exclude: /node_modules/, 
     }, 
     { 
      use: [ 
      { 
       loader: 'url-loader', 
       options: { limit: 40000 } 
      }, 
      'image-webpack-loader' 
      ], 
      test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf)$/, 
     }, 
     ], 
    }, 

    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     names: ['vendor', 'manifest'] 
    }), 
    new webpack.NoErrorsPlugin(), 
    new HtmlWebpackPlugin({ 
     template: 'src/index.html', 
     inject: true, 
     minify: { 
     removeComments: true, 
     collapseWhitespace: true, 
     removeRedundantAttributes: true, 
     useShortDoctype: true, 
     removeEmptyAttributes: true, 
     removeStyleLinkTypeAttributes: true, 
     keepClosingSlash: true, 
     minifyJS: true, 
     minifyCSS: true, 
     minifyURLs: true 
     } 
    }), 
    new ExtractTextPlugin('style.css'), 
    new webpack.optimize.AggressiveMergingPlugin(), 
    ], 
    devServer: { 
    historyApiFallback: true, 
    hot: true 
    }, 
}; 

babelrc

{ 
    "presets": ["babel-preset-env", "react"], 
    "plugins": ["transform-object-rest-spread"], 
    "env": { 
    "development": { 
     "plugins": ["react-hot-loader/babel"] 
    } 
    } 
} 

index.js

const App =() => { 
    const store = createStore(reducers, {}, applyMiddleware()); 

    return (
    <Provider store={store}> 
     <ConvertImage /> 
    </Provider> 
); 
}; 

ReactDOM.render(<App />, document.getElementById('root')); 

私WebPACKの設定ファイルです。 "スクリプト"：：{ は、 "スタート"：あなたが何か持っている必要がありpackages.jsonで

Answer 1

"のWebPACK-devのサーバー--progress --inline --hot --host 0.0.0.0" を、

Answer 2

実行時に組み込みHMR APIを使用して、サーバーからの変更を受け入れる必要があります。最低でも、あなたはどこかにあなたのエントリポイントスクリプトに次を追加する必要があります。

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

は、より良いアイデアを得るために、新しいドキュメントに記載されているcode sampleを見てください。

Answer 3

あなたはELSE IF AppContainerのまわりでそれをラップし、ホットロードを有効にするかどうか

かをチェックし、あなたのindex.jsコード

1. インポートRHL
2. に少し変更を加える必要があります。

あなたのコードは、このようになります。

// Your other deps go here 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { AppContainer } from 'react-hot-loader'; 

const App =() => { 
    const store = createStore(reducers, {}, applyMiddleware()); 

    return (
    <Provider store={store}> 
     <ConvertImage /> 
    </Provider> 
); 
}; 

if (module.hot) { 
    module.hot.accept(); 
    ReactDOM.render(
    <AppContainer> 
     <App /> 
    </AppContainer>, document.getElementById("root") 
); 
} 
else { 
    ReactDOM.render(<App />, document.getElementById("stub")); 
} 

また、私はWebPACKの-devのサーバーではなく、インライン旗を持っているWebPACKのコンフィグ