What does the lazy mode of webpack dev server do?

问题

I am running my webpack-dev-server with

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

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.

What exactly does --lazy do then?

Update:

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

回答1:

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();
}

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.

I made a pull request on github: https://github.com/webpack/webpack-dev-middleware/pull/62

回答2:

The lazy mode simply doesn't recompile at every change but waits instead the next Call to the entrypoint to check for changes

回答3:

Here is the difference between --lazy and --hot:

--lazy: no watching, compiles on request.

--hot: adds the HotModuleReplacementPlugin and switch the server to hot mode.

Also, find more information about HotModuleReplacementPlugin here: https://github.com/webpack/docs/wiki/list-of-plugins.

Refer: http://webpack.github.io/docs/webpack-dev-server.html

来源：https://stackoverflow.com/questions/34960032/what-does-the-lazy-mode-of-webpack-dev-server-do

标签

javascript

Webpack

webpack-dev-server