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屋！