BUNDLERS A webdev's guide through hell and back. The most basic bundler (and bundler configuration) takes an input, walks the module tree, and produces a single output. Advanced bundlers can take multiple inputs and produce multiple outputs (injectively) or a single output (surjectively). Of course this means you lose distinctiveness in both cases - it's impossible to unravel the bundle with 100% certainty. The most popular bundlers are `webpack` and `rollup`. There was a time when each had its own strengths, but now, they are essentially equivalent. The industry leans toward using `webpack` since it's first to market and very mature. `rollup` usage is a lot cleaner but because it's a late comer, has a lot less support. [NOTE] Although similar, transpilers could be seen as a more powerful variant of bundlers. Don't be fooled by this similarity: it is common to include css, images, and other files via import statements when using a bundler to keep cohorency. A transpiler doesn't understand these files. A bundler technically doesn't either, but it doesn't care about the actual content of the files - it simply collects similar files together, possibly applying a transformation by an external plugin (which can understand its contents), and outputs a blob or a new collection of files. WHEN TO USE THEM Essentially when you need to walk the tree of modules (via import statements), apply a transformation to them, and produce an output that can be used by other systems that don't natively support the module format. i.e. it bundles the modules into one lump of code and data. Most times in the context of web browsers, this other data consists of images and css, which can be output as separate blobs or collections of files. WEBPACK GETTING STARTED .... npm install -D webpack webpack-cli babel-loader @babel/core @babel/preset-env .... And then you start from the most basic configuration file (webpack.config.js): .... const path = require('path'); module.exports = { mode: 'development', entry: './src/index.js', output: { filename: '[name].[chunkhash].js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /.(js|jsx)$/, include: [path.resolve(__dirname, 'src')], loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } ] } }; ....