What does the lazy mode of webpack dev server do?

Question

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

Can you show your webpack config file? – Konstantine Kalbazov Jan 31 '16 at 21:23 — Konstantine Kalbazov, Jan 31 '16 at 21:23

score 3 · Accepted Answer · answered Feb 01 '16 at 13:54

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

score 0 · Answer 2 · answered Jan 23 '16 at 07:35

0

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

answered Jan 23 '16 at 07:35

OttavioMonzione

123
7

so then why is it not serving the `bundle.js` file at all? shouldnt it compile initially when starting up? – pdeva Jan 23 '16 at 08:13

score 0 · Answer 3 · answered Jan 25 '16 at 06:16

0

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

answered Jan 25 '16 at 06:16

Vishal Rajole

1,504
1
13
19

what does 'request' here mean? a GET request from browser? – pdeva Jan 25 '16 at 06:17
Yes, It can be GET request for resources like images/logo/js and/or css files etc. – Vishal Rajole Jan 25 '16 at 06:19
so then why is my browser giving a 404 – pdeva Jan 25 '16 at 06:21
hot mode means no reload - the webpack dev server script will not reload if you are in hot mode. So in hot mode, it is not sending GET request again. thats why you are not getting 404 in hot mode. – Vishal Rajole Jan 25 '16 at 06:26
let me reiterate. I am *not* running in hot mode. I am running in lazy mode using the params shown in the question. but i get a 404 error cause webpack is *not* compiling when it gets the GET request from the browser. that is the question – pdeva Jan 25 '16 at 07:10

What does the lazy mode of webpack dev server do?

3 Answers3

Linked