webpack dev server 的惰性模式有什么作用?
What does the lazy mode of webpack dev server do?
我是 运行 我的 webpack-dev-server
webpack-dev-server --lazy --inline --progress --colors --port 8082
然而,当我的浏览器尝试访问 bundle.js
.
时,它显示 404 错误
其他一切似乎都很好,因为如果我用 --hot
替换 --lazy
,一切正常。
那么 --lazy
到底做了什么?
更新:
这是 webpack 文件 -
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"] }
]
}
};
惰性模式不会在每次更改时重新编译,而是等待下一次调用入口点来检查更改
这是 --lazy 和 --hot 之间的区别:
--lazy: no watching, compiles on request.
--hot: adds the HotModuleReplacementPlugin and switch the server to hot mode.
此外,您可以在此处找到有关 HotModuleReplacementPlugin 的更多信息:
https://github.com/webpack/docs/wiki/list-of-plugins.
调试后我发现在webpack-dev-middleware
中(在webpackDevMiddleware
函数中)有如下if语句:
// in lazy mode, rebuild on bundle request
if(options.lazy && (!options.filename || options.filename.test(filename))) {
rebuild();
}
rebuild()
函数从未执行,因为 options.filename.test(filename)
离开 returns false
。那是因为 filename
值有一个斜线(“/bundle.js”)。因此,我更改了 options.filename
正则表达式以允许使用此斜线并解决了该问题。
我在 github 上提出了拉取请求:
https://github.com/webpack/webpack-dev-middleware/pull/62
我是 运行 我的 webpack-dev-server
webpack-dev-server --lazy --inline --progress --colors --port 8082
然而,当我的浏览器尝试访问 bundle.js
.
其他一切似乎都很好,因为如果我用 --hot
替换 --lazy
,一切正常。
那么 --lazy
到底做了什么?
更新:
这是 webpack 文件 -
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"] }
]
}
};
惰性模式不会在每次更改时重新编译,而是等待下一次调用入口点来检查更改
这是 --lazy 和 --hot 之间的区别:
--lazy: no watching, compiles on request.
--hot: adds the HotModuleReplacementPlugin and switch the server to hot mode.
此外,您可以在此处找到有关 HotModuleReplacementPlugin 的更多信息: https://github.com/webpack/docs/wiki/list-of-plugins.
调试后我发现在webpack-dev-middleware
中(在webpackDevMiddleware
函数中)有如下if语句:
// in lazy mode, rebuild on bundle request
if(options.lazy && (!options.filename || options.filename.test(filename))) {
rebuild();
}
rebuild()
函数从未执行,因为 options.filename.test(filename)
离开 returns false
。那是因为 filename
值有一个斜线(“/bundle.js”)。因此,我更改了 options.filename
正则表达式以允许使用此斜线并解决了该问题。
我在 github 上提出了拉取请求: https://github.com/webpack/webpack-dev-middleware/pull/62