は、だから私はホットリロード3を反応させるのに使用しようとしているホットリロード3

に反応します変えられない ;それは無視されます。は、だから私はホットリロード3を反応させるのに使用しようとしているホットリロード3

そして、ホットリロードがまったく機能しないという事実。

これは私のWebpackConfigです：

'use strict'; 

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:3000', 
    'webpack/hot/only-dev-server', 
    'react-hot-loader/patch', 
    './Root/index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/dist' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') }) 
    ], 
    resolve: { 
    alias: { 
     'redux-devtools/lib': path.join(__dirname, '..', '..', 'src'), 
     'redux-devtools': path.join(__dirname, '..', '..', 'src'), 
     'react': path.join(__dirname, 'node_modules', 'react') 
    }, 
    root: [ 
    path.resolve('./Root'),path.resolve('./Root/Source') 
    ], 
    modulesDirectories: [ 
    'node_modules' 
    ], 

    extensions: ['', '.js'] 
    }, 
    resolveLoader: { 
    'fallback': path.join(__dirname, 'node_modules') 
    }, 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     loaders: ['babel'], 
     exclude: /node_modules/, 
     include: __dirname 
    }, { 
     test: /\.js$/, 
     loaders: ['babel'], 
     include: path.join(__dirname, '..', '..', 'src') 
    }, 
    { 
     test: /\.json?$/, 
     loader: 'json' 
    }, 
    { 
     test: /\.css?$/, 
     loaders: ['style', 'raw'], 
     include: __dirname 
    }, 
    { 
     test: /\.(jpe?g|png|gif|svg)$/, 
     loader: 'url', 
     query: { limit: 10240 } 
    } 
    ] 
    } 
};

これは私のBabel.rc

{ 
    "presets": ["es2015-loose", "stage-0", "react"], 
    "plugins": ["react-hot-loader/babel"] 
}

、最終的に私のIndex.js（エントリー）

/// <reference path='../typings/browser.d.ts'/> 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { AppContainer } from 'react-hot-loader'; 
import {syncHistoryWithStore} from 'react-router-redux'; 
import {browserHistory } from 'react-router'; 
import Root from './Root'; 


import configureStore from './Source/Actions/configureStore'; 
import './Content/common.css' 


const store = configureStore(); 
const history = syncHistoryWithStore(browserHistory, store); 

import "react-big-calendar/lib/css/react-big-calendar.css" 
import BigCalendar from 'react-big-calendar'; 
import moment from 'moment'; 


moment.locale("pt-pt"); 
BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment)); 

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


if (module.hot) { 
    module.hot.accept('./Root',() => { 
    ReactDOM.render(
    <AppContainer > 
    <Root store={store} history = {history}/> 
    </AppContainer>, 
    document.getElementById('root') 
    ); 
    }); 
}

それでは、どのように実際にI希望ですコードを編集している間にコンポーネントを実際にホットリロードするように現在のプロジェクトを構成しますか？ここ

出典

2016-05-29 Morphex