Module Bundler

A module bundler in web programming is a tool used in frontend development.

They were originally needed because web browsers did not support module systems, so they were used to combine multiple Javascript files into a single file (e.g. main.js), so that the client only has to make a single HTTP request for that script. Although modern browsers now support ES modules natively, bundlers are still valuable for performance optimization, handling non-JS assets (e.g. CSS preprocessing), and providing development features.

They also provide dev servers that are locally hosted and watch for changes to the project and automatically recompile them.

The most common module bundler is webpack.