Question

所以我一直在尝试使用React Hot Reload 3 - 来激活我的项目中的热重载，目前我在React-Router中遇到错误

[react-router]你无法改变;它将被忽略

以及Hot Reload根本不起作用的事实。

这是我的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();。

如果您想热重装您的减速机，您应该按照此处详述的说明操作： https://github.com/reactjs/react-redux/releases/tag/v2.0.0

请记住在您的babel-loader之后添加-loader。

我已经创建了一个入门套件作为一个工作示例：

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

React Hot Reload 3

1 个答案: