1

所以我一直在尝试使用 React Hot Reload 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 (Entry)

/// <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')
     );
  });
}

那么在我编辑代码时，我将如何实际配置我当前的项目以实际热重新加载组件？

4

1 回答 1

1

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

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

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

如果你想热重载你的减速器，你应该按照这里详细说明： https ://github.com/reactjs/react-redux/releases/tag/v2.0.0

记得-loader在你的 babel-loaders 之后添加。

我创建了一个入门工具包作为工作示例：

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

于 2016-12-01T19:38:52.023 回答