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

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

• javascript
• webpack
• webpack-dev-server

• Can you show your webpack config file? – Konstantine Kalbazov Commented Jan 31, 2016 at 21:23
• @Kote ok i added it now – pdeva Commented Feb 1, 2016 at 2:20

3 Answers 3

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./webpack/webpack-dev-middleware/pull/62

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

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

--lazy: no watching, piles on request.

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

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

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