React热重载不起作用

3
我将使用插件https://www.npmjs.com/package/react-hot-loader来实现热重载功能。但是,当我刷新页面时,更改会反映在页面上,但并不是实时的,热重载并没有起作用。我认为每当我保存JSX文件时,应该实时地在HTML上反映出来,请纠正我,如果我错了。
我的JSX文件:
import { hot } from 'react-hot-loader'

@observer
class ListingComponent extends Component {
  render() {
  .........
  }
}
export default hot(module)(ListingComponent);

//global function to run from other frameworks
window.WB.react.renderListingComponent = function() {
    render(

        <ListingComponent/>,
        document.getElementById('node')

    );
}

My .babelrc

{
  "presets" : ["es2015", "react"],
  "plugins": ["transform-decorators-legacy","transform-class-properties","lodash","react-hot-loader/babel"]
}

我的webpack.config.js

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


// var BUILD_DIR = path.resolve(__dirname, 'src/public');
var BUILD_DIR = path.resolve(__dirname, '../assets/js');
var APP_DIR = path.resolve(__dirname, 'src/app');

var config = {
  resolve: {
    extensions: ['.js', '.jsx']
  },
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
  },

  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader',
        options: {
      // This is a feature of `babel-loader` for Webpack (not Babel itself).
      // It enables caching results in ./node_modules/.cache/babel-loader/
      // directory for faster rebuilds.
      cacheDirectory: true,
      plugins: ['react-hot-loader/babel'],
    },
      }
    ]
  }
};

module.exports = config;

webpack服务器命令

npm run dev --watch --hot ----output-public-path=/assets/js/ --inline

尝试清除节点缓存。重复:Webpack react-hot-loader不起作用 - Abhijit Padhy
你能否尝试在webpack.config.js中使用webpack热模块加载器?将plugins: ['react-hot-loader/babel']替换为plugins: [new webpack.HotModuleReplacementPlugin()] - Varit J Patel
请访问 https://github.com/gaearon/react-hot-loader/issues/1049#issuecomment-451282865。 - Artem Bernatskyi
1个回答

0

尝试

echo 999999 | sudo tee /proc/sys/fs/inotify/max_user_watches   

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接