webpack dev服务器的懒惰模式有什么作用? [英] What does the lazy mode of webpack dev server do?
问题描述
我正在运行我的webpack-dev-server
I am running my webpack-dev-server with
webpack-dev-server --lazy --inline --progress --colors --port 8082
然而,当我尝试使用浏览器时,我的浏览器显示404错误访问 bundle.js
。
However this shows a 404 error in my browser when it tries to access bundle.js
.
其他一切看起来很好,因为如果我替换 - 懒惰
- 热
,一切正常。
Everything else seems fine since if i replace --lazy
with --hot
, things work fine.
究竟是什么 - 懒惰
那么吗?
更新:
这是webpack文件 -
Here is the webpack file -
module.exports = {
devtool: "source-map",
entry: [
'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
"./app/main.js"
],
output: {
path: "./js",
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader"},
{ test: /\.js$/, exclude: /node_modules/, loaders: ["react-hot"] }
]
}
};
推荐答案
经过一些调试我发现在 webpack-dev-middleware
(在 webpackDevMiddleware
函数中)有以下if语句:
After some debugging I found that in webpack-dev-middleware
(in webpackDevMiddleware
function) there's the following if statement:
// in lazy mode, rebuild on bundle request
if(options.lazy && (!options.filename || options.filename.test(filename))) {
rebuild();
}
rebuild()
函数永远不会执行,因为 options.filename.test(filename)
aways返回 false
。那是因为 filename
值有一个斜杠(/bundle.js)。所以,我更改了 options.filename
正则表达式以允许这个斜杠并修复了问题。
The rebuild()
function is never executed because options.filename.test(filename)
aways returns false
. And that's because filename
value has a slash ("/bundle.js"). So, I changed the options.filename
regex to allow this slash and it fixed the issue.
我做了一个在github上提取请求:
https://github.com/webpack/ webpack-dev-middleware / pull / 62
I made a pull request on github: https://github.com/webpack/webpack-dev-middleware/pull/62
这篇关于webpack dev服务器的懒惰模式有什么作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!