Question

我正在使用

运行我的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"] }
        ]
    }
};

Answer 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)离开返回false。这是因为filename值有一个斜杠（＆＃34; /bundle.js"）。所以，我更改了options.filename正则表达式以允许这个斜杠并修复了问题。

我在github上发了一个pull请求： https://github.com/webpack/webpack-dev-middleware/pull/62

Answer 2

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

Answer 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

webpack dev服务器的懒惰模式有什么作用？

3 个答案: