Question

下面是我的webpack.config.js代码

pip install

这是我的package.son

的脚本代码

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

module.exports = {
    // context: __dirname + "/app",
   entry: [
    'webpack-dev-server/client?http://0.0.0.0:8080',
    'webpack/hot/only-dev-server',
     './src/main.jsx'],
    output: {
        path: "./build",
        filename: "main.js"
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          loaders:  ['react-hot', 'babel'],
          include: path.join(__dirname, 'build'),
          query:
            {
              presets:['es2015', 'react']
            },
          plugins: [
            new webpack.HotModuleReplacementPlugin()
          ]
        }
      ]
    }
}

这是我的main.js代码

  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  },

当我输入“npm run dev”时，我收到了此错误

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello World!</h1>,
  document.getElementById('example')
);

我去localhost：8080并没有显示。谁知道发生了什么？为什么我的反应热装载机不工作？

Answer 1

我使用找到的解决方案here使其工作。基本上需要做的是将module.hot.accept()添加到您将组件渲染到的脚本中。

例如：

import React from 'react';
import ReactDOM from 'react-dom';
import MainLayout from './components/MainLayout.jsx';

ReactDOM.render(
  <MainLayout />,
  document.getElementById('root')
);

module.hot.accept(); // <-- this one.

Answer 2

请参阅react-hot-boilerplate github并查看github中的.babelrc文件。

也许我没有，也请在您的设置中查看include，query，0.0.0.0。

请记住，根据您的babel版本（5或6），设置必须不同。

现在反应热门加载器已被弃用。请参阅react-hot-loader github。

Answer 3

默认情况下，react js提供热重载功能。仍然无法正常工作：

尝试将-- --reset-cache添加到您的运行命令中。 *对于Linux OS

参考： React js hot reload issue fix for Linux OS

Duplicate issue in github

Webpack react-hot-loader无法正常工作

3 个答案: