Parcel Config Default

Parcel Config Default provides the complete default configuration for Parcel bundler, defining the entire build pipeline including transformers, optimizers, packagers, and runtime components. This configuration package enables Parcel's zero-configuration approach by providing sensible defaults for modern web development workflows.

Package Information

• Package Name: @parcel/config-default
• Package Type: npm
• Language: JavaScript
• Installation: npm install @parcel/config-default
• License: MIT

Core Imports

Configuration file usage (most common):

The package is typically referenced in Parcel configuration files:

.parcelrc:

{
  "extends": "@parcel/config-default"
}

With customizations:

{
  "extends": "@parcel/config-default",
  "validators": {
    "*.{js,jsx,ts,tsx}": ["@parcel/validator-eslint"] 
  },
  "optimizers": {
    "*.js": ["@parcel/optimizer-esbuild"]
  }
}

Programmatic usage (advanced):

const defaultConfig = require("@parcel/config-default");
// defaultConfig contains the complete configuration object

import defaultConfig from "@parcel/config-default";
// TypeScript usage for accessing configuration programmatically

Basic Usage

Create a .parcelrc file in your project root to use the default configuration:

{
  "extends": "@parcel/config-default"
}

This provides comprehensive support for:

• JavaScript/TypeScript with Babel and SWC
• CSS preprocessors (Sass, Less, Stylus, PostCSS)
• Template languages (Pug, Vue SFC, React JSX)
• Data formats (JSON, YAML, TOML, XML)
• Images and assets (PNG, JPG, SVG, WebP)
• Specialized formats (GLSL, GraphQL, MDX, WebAssembly)

Architecture

The configuration is structured around Parcel's plugin architecture:

• Transformers: Convert source files to standardized formats
• Bundler: Groups related assets into output bundles
• Resolvers: Locate and resolve module dependencies
• Packagers: Combine transformed assets into final bundle files
• Optimizers: Minify and optimize production builds
• Compressors: Apply compression algorithms to outputs
• Namers: Determine output file naming strategies
• Runtimes: Inject runtime code for features like HMR
• Reporters: Handle build progress and completion events

Capabilities

Configuration Structure

The complete configuration interface exported by the package.

interface ParcelConfigDefault {
  bundler: string;
  transformers: Record<string, string[]>;
  namers: string[];
  runtimes: string[];
  optimizers: Record<string, string[]>;
  packagers: Record<string, string>;
  compressors: Record<string, string[]>;
  resolvers: string[];
  reporters: string[];
}

Configuration Object:

{
  "bundler": "@parcel/bundler-default",
  "transformers": { /* 55+ file patterns mapped to transformer pipelines */ },
  "namers": ["@parcel/namer-default"],
  "runtimes": ["@parcel/runtime-rsc", "@parcel/runtime-js", "@parcel/runtime-browser-hmr", "@parcel/runtime-service-worker"],
  "optimizers": { /* file patterns mapped to optimizer pipelines */ },
  "packagers": { /* file patterns mapped to packager plugins */ },
  "compressors": { "*": ["@parcel/compressor-raw"] },
  "resolvers": ["@parcel/resolver-default"],
  "reporters": ["@parcel/reporter-dev-server"]
}

Bundler Configuration

Specifies the bundling strategy used to group assets.

{
  "bundler": "@parcel/bundler-default"
}

Transformer Mappings

Maps file patterns to transformer plugin pipelines for processing different file types.

{
  "transformers": {
    "types:*.{ts,tsx}": ["@parcel/transformer-typescript-types"],
    "bundle-text:*": ["...", "@parcel/transformer-inline-string"],
    "data-url:*": ["...", "@parcel/transformer-inline-string"],
    "worklet:*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["@parcel/transformer-worklet", "..."],
    "react-static:*": ["@parcel/transformer-react-static", "..."],
    "*.mdx": ["@parcel/transformer-mdx", "@parcel/transformer-js"],
    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
      "@parcel/transformer-babel",
      "@parcel/transformer-js",
      "@parcel/transformer-react-refresh-wrap"
    ],
    "*.{json,json5}": ["@parcel/transformer-json"],
    "*.jsonld": ["@parcel/transformer-jsonld"],
    "*.toml": ["@parcel/transformer-toml"],
    "*.webmanifest": ["@parcel/transformer-webmanifest"],
    "webmanifest:*.{json,webmanifest}": ["@parcel/transformer-webmanifest"],
    "*.{yaml,yml}": ["@parcel/transformer-yaml"],
    "*.{glsl,vert,frag}": ["@parcel/transformer-glsl"],
    "*.{gql,graphql}": ["@parcel/transformer-graphql"],
    "*.{styl,stylus}": ["@parcel/transformer-stylus"],
    "*.{sass,scss}": ["@parcel/transformer-sass"],
    "*.less": ["@parcel/transformer-less"],
    "*.{css,pcss}": ["@parcel/transformer-postcss", "@parcel/transformer-css"],
    "*.sss": ["@parcel/transformer-sugarss"],
    "*.{htm,html,xhtml}": ["@parcel/transformer-posthtml", "@parcel/transformer-html"],
    "*.pug": ["@parcel/transformer-pug"],
    "*.coffee": ["@parcel/transformer-coffeescript"],
    "*.elm": ["@parcel/transformer-elm"],
    "*.vue": ["@parcel/transformer-vue"],
    "template:*.vue": ["@parcel/transformer-vue"],
    "script:*.vue": ["@parcel/transformer-vue"],
    "style:*.vue": ["@parcel/transformer-vue"],
    "custom:*.vue": ["@parcel/transformer-vue"],
    "*.{png,jpg,jpeg,webp,gif,tiff,avif,heic,heif}": ["@parcel/transformer-image"],
    "*.svg": ["@parcel/transformer-svg"],
    "*.{xml,rss,atom}": ["@parcel/transformer-xml"],
    "*.node": ["@parcel/transformer-node"],
    "url:*": ["...", "@parcel/transformer-raw"]
  }
}

Key Transform Patterns:

• "..." - Extends existing transformer pipeline
• "types:*" - TypeScript type-only files
• "bundle-text:*" - Text content for bundling
• "data-url:*" - Data URL transformations
• "worklet:*" - Web Worker and Worklet files
• "react-static:*" - React static site generation
• "webmanifest:*" - Web app manifest processing
• "url:*" - URL imports and references

Optimizer Configurations

Maps file patterns to optimization plugin pipelines for production builds.

{
  "optimizers": {
    "data-url:*": ["...", "@parcel/optimizer-data-url"],
    "*.css": ["@parcel/optimizer-css"],
    "*.{html,xhtml}": ["@parcel/optimizer-html"],
    "*.{js,mjs,cjs}": ["@parcel/optimizer-swc"],
    "*.svg": ["@parcel/optimizer-svg"],
    "*.{jpg,jpeg,png}": ["@parcel/optimizer-image"]
  }
}

Packager Assignments

Maps file patterns to packager plugins that combine assets into final bundles.

{
  "packagers": {
    "react-static:*.html": "@parcel/packager-react-static",
    "*.{html,xhtml}": "@parcel/packager-html",
    "*.css": "@parcel/packager-css",
    "*.{js,mjs,cjs}": "@parcel/packager-js",
    "*.svg": "@parcel/packager-svg",
    "*.{xml,rss,atom}": "@parcel/packager-xml",
    "*.ts": "@parcel/packager-ts",
    "*.wasm": "@parcel/packager-wasm",
    "*.{jsonld,svg,webmanifest}": "@parcel/packager-raw-url",
    "*": "@parcel/packager-raw"
  }
}

Namer Configuration

Specifies plugins that determine output file naming strategies.

{
  "namers": ["@parcel/namer-default"]
}

Runtime Plugins

Defines runtime code injection for different environments and features.

{
  "runtimes": [
    "@parcel/runtime-rsc",
    "@parcel/runtime-js", 
    "@parcel/runtime-browser-hmr",
    "@parcel/runtime-service-worker"
  ]
}

Runtime Components:

• @parcel/runtime-rsc - React Server Components support
• @parcel/runtime-js - Core JavaScript runtime features
• @parcel/runtime-browser-hmr - Hot Module Replacement for browsers
• @parcel/runtime-service-worker - Service Worker integration

Compressor Settings

Defines compression strategies for bundle outputs.

{
  "compressors": {
    "*": ["@parcel/compressor-raw"]
  }
}

Resolver Configuration

Specifies module resolution strategies for dependency lookup.

{
  "resolvers": ["@parcel/resolver-default"]
}

Reporter Configuration

Defines build progress and completion reporting plugins.

{
  "reporters": ["@parcel/reporter-dev-server"]
}

Extension and Customization

The configuration supports extension through the extends field and allows selective overrides:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.js": ["@custom/transformer", "..."]
  },
  "optimizers": {
    "*.js": ["@custom/optimizer"]
  }
}

Extension Patterns:

• Base configuration is loaded first
• Custom configurations are merged on top
• Array values can use "..." to extend existing pipelines
• Object values completely replace base configuration sections

Dependencies

Core Dependencies

The configuration depends on 24 core Parcel plugins:

• Bundling: @parcel/bundler-default
• Compression: @parcel/compressor-raw
• Naming: @parcel/namer-default
• Optimization: @parcel/optimizer-css, @parcel/optimizer-html, @parcel/optimizer-image, @parcel/optimizer-svg, @parcel/optimizer-swc
• Packaging: @parcel/packager-css, @parcel/packager-html, @parcel/packager-js, @parcel/packager-raw, @parcel/packager-svg, @parcel/packager-wasm
• Reporting: @parcel/reporter-dev-server
• Resolution: @parcel/resolver-default
• Runtime: @parcel/runtime-browser-hmr, @parcel/runtime-js, @parcel/runtime-rsc, @parcel/runtime-service-worker
• Transformation: @parcel/transformer-babel, @parcel/transformer-css, @parcel/transformer-html, @parcel/transformer-image, @parcel/transformer-js, @parcel/transformer-json, @parcel/transformer-node, @parcel/transformer-postcss, @parcel/transformer-posthtml, @parcel/transformer-raw, @parcel/transformer-react-refresh-wrap, @parcel/transformer-svg

Extended Dependencies

Additional plugins for specialized file types (loaded on demand):

• CSS Preprocessors: @parcel/transformer-sass, @parcel/transformer-less, @parcel/transformer-stylus, @parcel/transformer-sugarss
• Template Languages: @parcel/transformer-pug, @parcel/transformer-vue
• Programming Languages: @parcel/transformer-coffeescript, @parcel/transformer-elm, @parcel/transformer-typescript-types
• Data Formats: @parcel/transformer-toml, @parcel/transformer-yaml, @parcel/transformer-xml, @parcel/transformer-jsonld
• Specialized: @parcel/transformer-glsl, @parcel/transformer-graphql, @parcel/transformer-webmanifest, @parcel/transformer-worklet, @parcel/transformer-react-static, @parcel/transformer-inline-string
• Packaging: @parcel/packager-react-static, @parcel/packager-ts, @parcel/packager-xml, @parcel/packager-raw-url
• Optimization: @parcel/optimizer-data-url

Optional Dependencies

• @parcel/transformer-mdx - MDX (Markdown + JSX) support for backward compatibility

Peer Dependencies

Requires @parcel/core version ^2.15.4 for proper integration with the Parcel build system.