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).
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.
This is very different from just using
<script> in a few ways:
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).
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.
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.