Bundling

Bundling

General

Bundling allows us to load one JavaScript file into another JavaScript file so we can separate code into different files.

Bundling is standard practice for most large projects today and the idea is that instead of loading multiple JavaScript files or concatenating script files together in order to create a single large file we use tools to do this for us.

The benefit of this is that we can write large JavaScript applications without having to keep all the code in one file or manually tracking what code needs to be loaded before other code.

CommonJS

CommonJS is at the time of writing this document the most common way of loading one JavaScript file into another JavaScript file.

You can read more about CommonJS here.

Asynchronous Module Definition (AMD)

AMD is another common module loading system and you should be aware of it even if it is less common in the industry at the time of writing this document.

You can read more about AMD here.

Webpack

Webpack is a bundling tool that allows you to build large scale JavaScript applications and it is at the time of writing this document the best supported and most widely used bundling tool in the industry.

You can read more about Webpack here.

Common Webpack loaders

• Style loader
• CSS loader
• Sass loader
• Postcss loader
• Babel loader

Common Webpack plugins

• HtmlWebpackPlugin

Common Webpack additions

• Hot module replacement (HMR)