webpack dev server的lazy模式有什么作用？答案

【问题标题】：What does the lazy mode of webpack dev server do?webpack dev server的lazy模式有什么作用？
【发布时间】：2016-04-29 20:09:31
【问题描述】：

我正在使用

运行我的 webpack-dev-server

webpack-dev-server --lazy --inline --progress --colors --port 8082

但是，当我的浏览器尝试访问 bundle.js 时，它会显示 404 错误。

其他一切似乎都很好，因为如果我将 --lazy 替换为 --hot，一切正常。

那么--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"] }
        ]
    }
};

【问题讨论】：

你能展示你的 webpack 配置文件吗？
@Kote 好的，我现在添加了它

标签： javascript webpack webpack-dev-server

【解决方案1】：

经过一些调试，我发现在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) aways 返回false。那是因为filename 值有一个斜杠（“/bundle.js”）。因此，我更改了 options.filename 正则表达式以允许使用此斜线并解决了问题。

我在 github 上提出了拉取请求： https://github.com/webpack/webpack-dev-middleware/pull/62

【讨论】：

【解决方案2】：

惰性模式不会在每次更改时重新编译，而是等待下一次调用入口点以检查更改

【讨论】：

那么为什么它根本不提供bundle.js 文件呢？启动时不应该编译吗？

【解决方案3】：

这里是--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.

参考：http://webpack.github.io/docs/webpack-dev-server.html

【讨论】：

这里的“请求”是什么意思？来自浏览器的 GET 请求？
是的，它可以是对图像/徽标/js和/或css文件等资源的GET请求。
那么为什么我的浏览器会出现 404
热模式意味着不重新加载 - 如果您处于热模式，webpack 开发服务器脚本将不会重新加载。所以在热模式下，它不会再次发送 GET 请求。这就是为什么你在热模式下没有得到 404。
让我重申一下。我没有在热模式下运行。我使用问题中显示的参数在惰性模式下运行。但是我得到一个 404 错误，因为当它从浏览器获取 GET 请求时，webpack not 正在编译。这就是问题