Node.js 无法获取HotModuleReplace插件并在浏览器中启用react hot，尽管文件监视正在工作_Node.js_Webpack

Node.js 无法获取HotModuleReplace插件并在浏览器中启用react hot，尽管文件监视正在工作

node.js webpack

Node.js 无法获取HotModuleReplace插件并在浏览器中启用react hot，尽管文件监视正在工作,node.js,webpack,Node.js,Webpack,我正在尝试使用webpack的热模块替换插件。我已经设法让它随机工作，但它仍然没有做什么，我希望它基本上，我在我的控制台中没有收到任何消息，表明它甚至处于活动状态，尽管它正在构建中，没有问题，并且文件监视正在工作，因为我收到的消息webpack:bundle现在是有效的，webpack:bundle在我更新时是无效的 webpack、webpack dev server和react hot都是本地安装的但在浏览器的控制台中，我唯一看到的是： Download the React DevToo

我正在尝试使用webpack的热模块替换插件。我已经设法让它随机工作，但它仍然没有做什么，我希望它

基本上，我在我的控制台中没有收到任何消息，表明它甚至处于活动状态，尽管它正在构建中，没有问题，并且文件监视正在工作，因为我收到的消息

webpack:bundle现在是有效的

，

webpack:bundle在我更新时是无效的

webpack

、

webpack dev server

和

react hot

都是本地安装的

但在浏览器的控制台中，我唯一看到的是：

Download the React DevTools for a better development experience: https://fb.me/react-devtools

我正在使用Laravel根据一个环境变量更新我的索引文件，它工作得很好

以下是

index.php

文件：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="content"></div>

        @if(env("APP_HOTRELOAD"))
            <script src="http://localhost:8080/js/vendor.js"></script>
            <script src="http://localhost:8080/js/app.js"></script>
        @else
            <script src="js/vendor.js"></script>
            <script src="js/app.js"></script>
        @endif
    </body>
</html>

为了启动webpack dev服务器，我使用一个单独的

server.js

文件，通过使用

node server.js

执行：

var path = require("path");
var webpack = require("webpack");
var node_modules = path.resolve(__dirname, "node_modules");
var public_dir = path.resolve(__dirname, "public");

module.exports = {

    debug: (process.env.NODE_ENV === "production"),

    entry: {
        vendor: [
            "es5-shim",
            "es5-shim/es5-sham",
            "babel-core/polyfill",
            "babel-core/external-helpers",
            "react",
            "react-router-component"
        ],
        app: [
            "webpack-dev-server/client?http://localhost:8080",
            "webpack/hot/only-dev-server",
            path.resolve(__dirname, "resources/assets/js/index.js")
        ]
    },

    contentBase: public_dir,

    output: {
        path: path.resolve(public_dir, "js"),
        filename: "app.js",
        publicPath: "/"
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js"),
        //This is necessary for React to know whether it's supposed to strip out
        //addons and extra stuff when being minified.  Essentially, it becomes dead
        //code and webpack will take it out.
        new webpack.DefinePlugin({
            "process.env": {"NODE_ENV": JSON.stringify(process.env.NODE_ENV)}
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],

    module: {
        loaders: [
            {
                test: /\.(sa|c)ss$/,
                loader: "css!style!sass"
            },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loaders: [
                    "react-hot",
                    "strip-loader?strip[]=debug,strip[]=console.log,strip[]=console.error",
                    "babel-loader"
                ]
            }
        ]
    },

    resolve: {
        root: path.resolve(__dirname, "resources/assets/js"),
        extensions: ["", ".js", ".json"]
    }
};

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.hot-reload.config');

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    contentBase: config.contentBase,
    hot: true,
    historyApiFallback: true,
    quiet: false,
    noInfo: false,
    stats: {
        colors: true
    }
}).listen(8080, 'localhost', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:8080');
    });

等待一段时间后，它似乎会随机工作，但如果我手动更改文件或刷新页面，它似乎就会中断。我试过使用Firefox和Chrome，但都没有什么不同，所以我认为这是在构建中

有什么问题吗？

我想出来了。页面上有一个注释，说明了如何使用webpack dev server，但我还是读了一遍

如果查看我的配置，您将看到：

...
output: {
    path: path.resolve(public_dir, "js"),
    filename: "app.js",
    **publicPath: "/"**
},
...

我误解了

publicPath

键及其路径

但是，中给出的示例显示：

并指出：

这个修改过的包是从内存中以publicPath中指定的相对路径提供的（请参见API）。它不会写入您配置的输出目录如果捆绑包已存在于同一url路径，则内存中的捆绑包将优先。

但是，在本例中，此捆绑包将从

提供，而不是从

/assets/

提供，因为进一步向下。没有注意到脚本所在的目录可能被别名为

/assets/

，因此我将

路径放置为

公共路径，而不是我的JS实际从中提供服务的子目录
文件指出：

所以我改变了：
    publicPath: "/"

致：
现在我的文件被正确地提供了。我添加了/js/
，因为在实际的服务器上，我的JavaScript就是从这里提供的
    publicPath: "/"

    publicPath: "http://localhost:8080/js/"