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']
        }
      }
    ]
  }
};
....