Joshua's Cheatsheets - Js Bundlers


What & Link Type
Bundlers Tooling Report
- This is a great new resource (2020) for a comparison of common bundlers and build tools, especially based on supported feature sets.
Comparison / Analysis


* --- WARNING!!! --- *
When you are on the docs pages for Parcel, make sure you are on the correct version (V1 vs V2)!

And make sure you have the version of Parcel you mean to have (parcel --version if you want to check).

Parcel Troubleshooting

  • I'm not getting source maps!

    • Things to make sure:

      • Don't use --no-source-maps
      • Don't use --experimental-scope-hoisting


Webpack Resources

What & Link Type
Webpack Docs - "Getting Started" Guide
Flavio - "Introduction to Webpack" Guide
Andrew Welch - "An Annotated Webpack 4 Config for Frontend Web Development" Guide

Webpack Config File

If you want to use a config file with Webpack, you do so by making webpack.config.js in the root of your project, and having a single export:

module.exports = {
	// ...

For seeing all the options, and comments on what they do, reference the configuration page from the official docs.

You can use this interactive config builder tool, or this one, to help you get started.

Webpack Config File Intellisense / Autocomplete

If you are trying to get Intellisense to work in a webpack.config.js file, add a type annotation so VSCode can understand the config object:

/** @type {import('webpack').Configuration} */
module.exports = {
	mode: 'development',
	// ...

See my blog post on the topic, for details.

Markdown Source Last Updated:
Sun Jul 19 2020 18:16:36 GMT+0000 (Coordinated Universal Time)
Markdown Source Created:
Wed May 13 2020 21:55:42 GMT+0000 (Coordinated Universal Time)
© 2020 Joshua Tzucker, Built with Gatsby