12

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?

3 Answers 3

11

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.

1
  • 3
    loading (say) 200K of JavaScript over two-dozen requests is a lot slower than loading that same 200K of JavaScript in one request this is obsolete by using http/2 multiplexing
    – cdalxndr
    Jul 13, 2021 at 19:12
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...

0

The problem I can see are 3rd party modules and the way we are developing apps. 3rd party modules will be stored under node_modules folder with bunch of unnecessary files (readmes, tests, whatever) and its not easy task to clean up this folder for production. Also, many 3rd party libraries are still ES5 and can't be easily translated and loaded by browser. If you have no any 3rd party libraries, you are good to go but you should also consider other things mentioned by guys above (browser compatibility and web page loading performance). Moreover, loading of resources which are not directly referenced in html (and become asynchronous in opposite to bundled resources) must be handled by your code and this can be tricky and hard to manage.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.