πŸ—’οΈ (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 output) 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 or <folder>/package.json#targets.*.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

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

With multiple entrypoints, you should use an explicit distDir as opposed to the top-level 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 by specifying which browsers (-versions) your build is targeting (e.g. Babel or Autoprefixer).

You can configure environments through targets#context and targets#engines and engines / browserslist.

ΒΆ Configuring Parcel

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