react-hot-loader检查正确但不更新 [英] react-hot-loader checking correctly but not updating

问题描述

最低回报

webpack.config.js

  var path = require（'path'）; 
 var webpack = require（'webpack'）; 
 var HtmlWebpackPlugin = require（'html-webpack-plugin'）; 
 
 module.exports = {
条目：[
'alse-hot-loader / patch'，
 path.resolve（__ dirname，'。/ src / index .jsx'），
]，
输出：{
 publicPath：'/'，
路径：path.resolve（__ dirname，'dist'），
 filename ：'bundle.js'，
}，
模块：{
规则：[
 {
 test：/\。js * /，
包括：[path.resolve（__ dirname，'src'）]，
 loader：'babel-loader'，
}，{
 test：/\。$，
使用：[
 {loader：'style-loader'}，
 {loader：'css-loader'}，
 {loader：'less-loader'}，
]，
}，
]，
}，
解析：{
别名：{
'COMPONENTS'：path.resolve（__ dirname，' ./src/components'），
'CONTAINERS'：path.resolve（__ dirname，'。/ src / container'），
'MODELS'：path.resolve（__ dirname，'。/ src /楷模），
'ROUTES'：path.resolve（__ dirname，'。/ src /routes'），
'SERVICES'：path.resolve（__ dirname，'。/ src / services'），
'THEMES'：path.resolve（__ dirname，'。/ src /themes'），
}，
 extensions：['。js'，'。jsx'，'。without']， 
}，
插件：[
 new webpack.HotModuleReplacementPlugin（），
 
 new webpack.NoEmitOnErrorsPlugin（），
 
 new webpack。 NamedModulesPlugin（），
 
 new HtmlWebpackPlugin（{
 template：path.resolve（__ dirname，'src'，'index.html'），
}），
 ]，
 devtool：'source-map'，
 target：'electron-renderer'，
 devServer：{
 port：8000，
 hot：true，
 historyApiFallback：true，
}，
}; 
  

index.jsx

  import来自'react'的React; 
从'react-dom'导入ReactDOM;来自'react-hot-loader'的
 import {AppContainer}; 
 import'./routes'的路线; 
 
 const main = document.createElement（'div'）; 
 main.id ='main'; 
 document.body.appendChild（main）; 
 
 const doRender =（Component）=> {
 ReactDOM.render（
< AppContainer> 
< Component /> 
< / AppContainer> 
，main）; 
} 
 
 doRender（路线）; 
 
 if（module.hot）{
 module.hot.accept（'./ routes'，（）=> {
 doRender（Routes）; 
 }）; 
} 
  

routes / index.jsx

  export default class Routes extends React.Component {
 render（）{
 return（
< div> ; routes< / div> //此处更改文本未正确更新。
）; 
} 
} 
  

解决方案

得到了修复了这个问题，最小的回购是这里。希望这会有所帮助。

Minimum Repo Here

I'm trying to work on a react + electron + webpack2 demo project. Currently I'm stucked in react-hot-loader3. As shown below, hot update checking seems to work correctly but not updating as expected(the changes I've made to Component not updated). Has this something to do with electron or something? I've never used react-hot-loader before.

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: [
    'react-hot-loader/patch',
    path.resolve(__dirname, './src/index.jsx'),
  ],
  output: {
    publicPath: '/',
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js*/,
        include: [ path.resolve(__dirname, 'src') ],
        loader: 'babel-loader',
      }, {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'less-loader' },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      'COMPONENTS': path.resolve(__dirname, './src/components'),
      'CONTAINERS': path.resolve(__dirname, './src/containers'),
      'MODELS': path.resolve(__dirname, './src/models'),
      'ROUTES': path.resolve(__dirname, './src/routes'),
      'SERVICES': path.resolve(__dirname, './src/services'),
      'THEMES': path.resolve(__dirname, './src/themes'),
    },
    extensions: ['.js', '.jsx', '.less'],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),

    new webpack.NoEmitOnErrorsPlugin(),

    new webpack.NamedModulesPlugin(),

    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html'),
    }),
  ],
  devtool: 'source-map',
  target: 'electron-renderer',
  devServer: {
    port: 8000,
    hot: true,
    historyApiFallback: true,
  },
};

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Routes from './routes';

const main = document.createElement('div');
main.id = 'main';
document.body.appendChild(main);

const doRender = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>
  , main);
}

doRender(Routes);

if(module.hot) {
  module.hot.accept('./routes', () => {
    doRender(Routes);
  });
}

routes/index.jsx

export default class Routes extends React.Component {
  render() {
    return(
      <div>routes</div> // change text here did not update correctly.
    );
  }
}

解决方案

Got this problem fixed, the minimum repo is here. Hope this helps.

这篇关于react-hot-loader检查正确但不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！