Question

我正在尝试在React中使用React Hot Loader。我通过运行＆＃34; npm install --save-dev react-hot-loader＆＃34;来安装反应热加载器。我试图遵循http://gaearon.github.io/react-hot-loader/getstarted/，但无法理解。我附加了我的webpack.config.js和package.json。我在文档中列出了更改。但我无法看到我在组件中进行的更改。有什么问题？

webpack.config.js

ENTER test, name= abc
ENTER test, name= bc
ENTER test, name= c
ENTER test, name= 
  LOOP  name c  first c     sub 
  LOOP  name bc     first b     sub c
  LOOP  name abc    first a     sub bc
YIELDED: abc
YIELDED: Abc
  LOOP  name abc    first a     sub Bc
YIELDED: aBc
YIELDED: ABc
  LOOP  name bc     first b     sub C
  LOOP  name abc    first a     sub bC
YIELDED: abC
YIELDED: AbC
  LOOP  name abc    first a     sub BC
YIELDED: aBC
YIELDED: ABC

来自package.json的

脚本

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

module.exports = {
    devServer: {
        inline: true,
        contentBase: './src',
        port: 3000
    },
    devtool: 'cheap-module-eval-source-map',
    entry: [
        'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
        'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
        './dev/js/index.js' // Your appʼs entry point
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['react-hot','babel'],
                exclude: /node_modules/
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!sass-loader'
            }
        ]
    },
    output: {
        path: 'src',
        filename: 'js/bundle.min.js'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]
};

的index.html

 "scripts": {
    "dev": "webpack",
    "start": "webpack-dev-server"
  }

Answer 1

好的，现在你需要将热门加载脚本添加到你的html文件中，就像捆绑之前一样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Webpack</title>
</head>
<body>

    <div id="root"></div>

    <script src="http://localhost:3000/webpack-dev-server.js"></script>
    <script src="js/bundle.min.js"></script>
</body>
</html>

它位于localhost：3000之下，因为我在你的webpack配置中看到了这一点。我通常把它留在：8080，但我认为它需要基于你的配置。

React-Hot-Loader入门

1 个答案: