PabloRosales JavaScript Developer

Bundlers


What is a bundler?

A bundler is a tool that puts all your code and its dependencies into one file or multiple split files, each one called a bundle.

The bundler can also do a lot more than just joining all together, it can do things like transforming our ES6 code to ES5 code, remove unused code, minify the smallest size possible, tree shaking, etc. Capabilities usually depends on the bundler and its plugins.

There are many popular bundlers like Rollup, Webpack, Parcel, Browserify and Poi

What is a bundle?

A "bundle" is a file that contain code and its dependencies bundled together, sometimes is just part of the code (for example just what will be used in a page) and sometimes is the whole application or library. Usually a bundle file is minified to make it load fast (when on the web).

Entry files

Usually a bundler gets one or more entry files, those files include your code and import all their dependencies, which can be JavaScript modules, CSS files, images, etc. Bundlers use a dependency graph to decide what will be bundled.

Output

The output can be one file resulting from the bundling, or many split files (sometimes called chunks) separated to be used as needed.

Watchers

Most bundlers have options to watch files for changes, this eliminates the need for you to run the bundler after each change you make.

Made with by PR