React热重新加载3

Question

因此，我一直在尝试使用React热重新加载3--在我的项目中激活热重新加载，但目前我在使用React-Router时遇到错误

您不能更改react-router；它将被忽略

这以及热重新加载根本不起作用的事实。

这是我的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')
     );
  });
}

那么，当我编辑代码时，如何配置我当前的项目来真正热重新加载组件呢？

Answer 1

按照此处的说明进行操作：https://webpack.github.io/docs/hot-module-replacement.html

在您的代码中，将es2015-loose替换为es2015，因为es2015-loose预设已过时。

尝试调用module.hot.accept();。

如果您想要热重新加载您的reducer，您应该遵循这里详细说明：https://github.com/reactjs/react-redux/releases/tag/v2.0.0

请记住在babel加载器之后添加-loader。

我已经创建了一个初学者工具包作为工作示例：

https://github.com/agrcrobles/react-native-web-webpack-starter