1

I am a bit confused regarding module loaders Like I am using webpack which load modules as chunks but it is only while developing When the code gets minified it will be a single file for all scripts and css and there how the module loaders work?

Any explanation would be appreciated

2

Short answer:

You always have a single file know as the bundle with webpack, but it will generate a source map in development (which make it look like multiple files).

Detailed answer:

Web browsers don't natively support CommonJS.

For example this is not natively supported by browsers:

var module = require('./module');

webpack is module bundler (not loader).

Module bundlers allow you to give them a single file to start form and they will write all the required modules (files) into a single large file know as a bundle.

You can then add a single <script> tag to your HTML, which will load the bundle.

The reason you see multiple files in the browsers developer tools is because webpack automatically generates a source map which is usually a JSON file which tells the browser's developer tools how to display the generated bundle as multiple files.

Tl;dr

This is very different from just using <script> in a few ways:

  1. You have to use globals (or create a global namespace object) to get a reference to your modules dependencies. An example of this is AngularJS which exposes the angular global var, and your module just uses the angualr global var without require()ing it (specifying where it comes from).

  2. You have to manually write individual script in the correct order before the <script> tag of your module that uses those dependencies. For example you must place the AngularJS <script> script tag before your modules <script> or else things will not work.

  3. If you intend on minifying your code using regualr script tags you will (almost) always end up duplicating the multiple <script> tags between your HTML and your minification build script.

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.