Web

Build Tools

Webpack

Webpack is a dependency bundler at heart. You declare dependencies in your JavaScript with import statements; then webpack follows them, building a dependency tree as it goes. From this tree it generates one or more bundles: monolithic JavaScript files built up from many individual modules and source files.

In practice declaring dependencies often means importing JavaScript modules, e.g. those installed using npm. This is very useful in itself as it effectively allows us to write modular JavaScript code for the browser. But the dependencies certainly don’t have to be JavaScript. You can import anything for which there is a loader.

See also:

• official site

Webpack Loaders

When webpack encounters an import, it imports the contents of that file as JavaScript by default. But if you configure one or more loaders in your webpack config file then it will first use those to process the file. Using this you can import assets such as images or CSS, as well as code in other languages needing transpilation such as SASS or TypeScript.

See also:

• official documentation on loaders
• list of loaders

Webpack Plugins

Webpack plugins extend webpack’s functionality beyond what can be done with loaders. Webpack has an extensive ecosystem and there are plugins for almost anything you’d want to do with a web app.

See also:

• official documentation on plugins
• official list of plugins
• Awesome webpack list of plugins

Webpack Configuration

Webpack can be partially configured on the command line, but to unlock its true power you’ll need configuration files. These configuration files are themselves JavaScript modules that export a configuration object.

Babel

Babel is a transpiler for JavaScript. That is it takes input in one language and outputs in another language (possibly the same one) of the same abstraction level. This means it is a type of compiler but is not the same as the common use of compiler, meaning specifically a source code to machine code compiler (such as the GCC compiler for C code).

Babel in particular, of course, takes JavaScript to JavaScript, though it now has a slightly more general role thanks to a number of plugins. For example it can also transpile React JSX into JavaScript.

See also:

• official site
• Wikipedia article on transpilation