尽管文件监视正在运行，但无法在浏览器中启用带有 react-hot 的 HotModuleReplace 插件 [英] Cannot get HotModuleReplace plugin with react-hot to be enabled in the browser, though file watching is working
问题描述
我正在尝试使用 webpack 的 Hot Module Replacement 插件.我已经设法随机让它工作，但它仍然没有达到我希望的效果.
I'm trying to use webpack's Hot Module Replacement plugin. I've managed to randomly get it working, but it still isn't doing quite what I would hope it to.
基本上，当我收到消息 webpack: bundle is now Valid 和 webpack: bundle 现在是 INVALID 当我更新时.
Basically, I get no messages in my console that it's even active, though it's building without issue and file watching is working, as I get the messages webpack: bundle is now VALID and webpack: bundle is now INVALID when I update.
webpack、webpack-dev-server 和 react-hot 都安装在本地.
webpack, webpack-dev-server, and react-hot are all installed locally.
但在浏览器的控制台中，我唯一看到的是:
But in the browser's console, the only thing I see is:
Download the React DevTools for a better development experience: https://fb.me/react-devtools
我正在使用 Laravel 根据环境变量更新我的索引文件，并且工作正常.
I'm using Laravel to update my index file based on an environment variable and it is working just fine.
这是 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 配置文件(webpack.hot-reload.config.js):
Here is the webpack config file (webpack.hot-reload.config.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"]
}
};
为了启动 webpack-dev-server，我使用了一个单独的 server.js 文件，使用 node server.js 执行:
In order to start the webpack-dev-server, I use a separate server.js file, executed by using node server.js:
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 并没有什么区别，所以我认为它在构建中.
It seems to work randomly after waiting some time, but if I change a file or refresh the page manually, it seems to just break. I've tried using both Firefox and Chrome and it doesn't make a difference, so I'm thinking it's in the build.
可能有什么问题?
推荐答案
我想通了.页面上有评论记录了如何使用 webpack-dev-server，但我设法阅读了它.
I figured it out. There was a comment about it on the page that notes how to use webpack-dev-server, but I managed to read over it.
如果您查看我的配置，您会看到:
If you look in my config you'll see:
...
output: {
path: path.resolve(public_dir, "js"),
filename: "app.js",
**publicPath: "/"**
},
...
我误解了 publicPath 键及其路径.
I misinterpreted the publicPath key and its path.
但是，文档 中给出的示例显示:
However, the example given in the docs shows:
module.exports = {
entry: {
app: ["./app/main.js"]
},
output: {
path: "./build",
publicPath: "/assets/",
filename: "bundle.js"
}
};
并声明:
这个修改后的包在 publicPath 中指定的相对路径中从内存中提供(请参阅 API).它不会写入您配置的输出目录.如果包已经存在于相同的 url 路径中，则内存中的包将优先.
This modified bundle is served from memory at the relative path specified in publicPath (see API). It will not be written to your configured output directory. Where a bundle already exists at the same url path the bundle in memory will take precedence.
然而，对于这个例子，这个包将从 / 提供，而不是从 /assets/ 提供，因为再往下，内容库以 build/ 形式给出.没有任何内容表明脚本所在的目录可能是 /assets/ 的别名，所以这就是为什么我将 / 路径作为 publicPath 而不是 实际上是从我的 JS 提供的子目录..
However, for this example, this bundle will be served from /, not /assets/ because further down, the content base is given as build/. There's nothing that notes that the directory where the scripts lie is possibly aliased to /assets/ at all, so that's why I placed the / path as the publicPath instead of the subdirectory my JS was actually being served from..
文档指出:
教webpack制作对 webpack-dev-server 的请求(用于块加载或 HMR)，您需要在 output.publicPath 选项中提供完整的 URL.
所以我改变了:
publicPath: "/"
到:
publicPath: "http://localhost:8080/js/"
现在我的文件被正确提供.我添加了 /js/ 因为这是我在实际服务器上提供 JavaScript 的地方.
And now my files are being served up correctly. I added the /js/ because that's where I my JavaScript is served from on the actual server.
这篇关于尽管文件监视正在运行，但无法在浏览器中启用带有 react-hot 的 HotModuleReplace 插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
