Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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"] }
        ]
    }
};
like image 797
pdeva Avatar asked Jan 23 '16 05:01

pdeva


People also ask

How does webpack lazy loading work?

You can load only the files you want and improve your app's performance. Webpack allows you to lazy load 3rd-party libraries, and, even better, it allows you to chunk your own app and lazy load parts of it on demand. Webpack has implemented the ES7 dynamic import spec (available in Chrome and Safari).

What does the webpack-dev-server do?

webpack-dev-server is Webpack's officially supported CLI-based tool for starting a static server for your assets. While you don't need any CLI tools to use Webpack, webpack-dev-server gives you a single command that starts a static server with built-in live reload.

Is webpack-dev-server necessary?

And if I want to use react-hot-loader, is the webpack-dev-server necessary? Nope, it works on top of Webpack's hot module replacement interface. You can create your own 'hot server' if you want.

Does webpack automatically minify?

Webpack v4+ will minify your code by default in production mode .


1 Answers

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

like image 51
Konstantine Kalbazov Avatar answered Oct 22 '22 23:10

Konstantine Kalbazov