Webpack vs ES6 modules

Question

I have recently started learning Webpack. What I have understood is that it bundles various assets like JavaScript, CSS, etc., into bundles.

But regarding JavaScript, can't we achieve the same functionality with ES6 modules? For example, ideally we can have only one script of type module in our landing page .html file and that script module will import the require dependecies in the ES6 way.

I think ES6 modules are supported in almost all modern browsers. Isn't Webpack redundant in this scenario?

Answer 1

For most browsers, yes, you can accomplish getting all needed code to the browser with just ES6 modules, without Webpack. Whether you'd want to do that, though, is another matter, and depends on your target browsers and how many modules your application consists of (balanced against your tolerance for lots of network requests).

Browser support for ES6 modules is close to ubiquitous right now but, for example, on Android, export isn't supported in embedded-in-app browsers at the moment. So, if you want for your scripts to work in say, Facebook's or LinkedIn's or Twitter's in-app browser on Android, that'll be a problem.

A potentially bigger problem is the number of network requests you may need to expect if you don't bundle your code. If your application consists of, say, two dozen modules (not a crazy number of modules at all), that's two dozen network requests your browser has to make. And as you likely know, loading (say) 200K of JavaScript over two-dozen requests is a lot slower than loading that same 200K of JavaScript in one request.

Finally, even if you were going with loading two dozen modules client-side, presumably you'd want to be loading minified JavaScript (even if you're not transpiling, just minifying). Which means you're doing some server-side code manipulation already. Which means, bundling all that code as a final step will, still, almost always make sense.

Hope this helps! It's a good and reasonable question; just answering it made me think about stuff I hadn't really thought through before.

Answer 2

I think Webpack will stay as useful tool in feature when es6 import gets standard in browsers.

There are a lot of things Webpack manages: plugins, loaders and so on. Also, bundling will be always in demand.

Also, Webpack version 5 appeared which provides module federation feature where you can use part of code from one bundle into another. which is really great feature especially in microfrontends.

So, I think Webpack is really great tool and it will be always useful...