πŸ—’οΈ (No) configuration

How far you can get without any configuration and how to configure Parcel

(The meaning of ~ in this section is described in Module Resolution.)

ΒΆ Targets

When Parcel runs, it can build your files in multiple different ways simultaneously. These are called "targets".

For example, you could have a "modern" target that targets newer browsers and a "legacy" target for older browsers.

Every entrypoint will be processed (and outputted) once per target.

ΒΆ Specifying Entrypoints

These are the files that contain the source code to your app before being compiled by Parcel and are picked up by:

  1. $ parcel <entries>
  2. $ parcel <folder(s)> uses <folder>/package.json#source (respectively)
  3. ./src/index.*
  4. ./index.*

From there, everything those assets depend on will be considered a "source" in Parcel.

ΒΆ Setting the output path

The path where the output bundles should be placed can be specified (in that order) using a top-level field in package.json (see common targets and custom targets), using targets.*.distDir or the --dist-dir CLI parameter.

Default values for the output folder

  • for the common targets is path.dirname(package.json#${targetName})
  • for custom targets is path.dirname(package.json#${targetName}) or ~/dist/${targetName}/.

The implicit default target has the output folder ~/dist/.

With multiple entrypoints, you should use an explicit distDir as oppsed to the top-levle target fields because Parcel wouldn't know which bundle should have the specified name:

a.html b.html
package.json:
{
"targets": {
"app": {
"distDir": "./www"
}
}
}

ΒΆ Environments

Environments tell Parcel how to transform and bundle each asset. They tell Parcel if an asset is going to be run in a browser or in Node/Electron.

They also tell Parcel's plugins what their output should be. They tell Babel or Autoprefixer what browsers your asset is targeting.

You can configure environments through targets and engines / browserslist.

ΒΆ Configuring Parcel

When you do need to configure Parcel, it will be in one of 3 places.

  • If you need to configure the CLI, it will be a CLI flag
  • If you need to configure your package, it will be in the package.json
  • If you need to configure something with your files or the Parcel asset pipeline, it will be in .parcelrc