CheatParcel Zero-config bundler
Light · Postcard
102 × 152 mm · PDF
Dark · Postcard
102 × 152 mm · PDF
Ink saver · Postcard
102 × 152 mm · PDF
Light · A4 landscape
297 × 210 mm · PDF
Dark · A4 landscape
297 × 210 mm · PDF
Ink saver · A4 landscape
297 × 210 mm · PDF
Light · A3 landscape
420 × 297 mm · PDF
Dark · A3 landscape
420 × 297 mm · PDF
Ink saver · A3 landscape
420 × 297 mm · PDF
Start here
npm install -D parcel
Add Parcel to a project
npx parcel src/index.html
Dev server with HMR
npx parcel build src/index.html
Optimized production build
npx parcel watch src/index.js
Rebuild only, no server
npx parcel --port 3000
Pick the dev port
npx parcel build --dist-dir out
Change output folder
npx parcel build --public-url /app/
Deploy under a sub-path
npx parcel build --no-cache
Build without the cache
Concepts
- Entry index.html or source field
- Dev server localhost:1234, HMR
- dist/ minified, hashed files
- Watch rebuild, no HTTP server
Dev server
parcel <entry>
Start the dev server (same as parcel serve)
parcel serve <entry>
Explicit form of the dev server
parcel --port <port>
Set the port (default 1234 or $PORT)
parcel --host <host>
Listen on one host instead of all
parcel --open [browser]
Open the entry in a browser
parcel --httpsServe dev and HMR over HTTPS
parcel --cert <file> --key <file>
Use your own HTTPS certificate
parcel --no-hmrTurn off hot reloading
parcel --lazyBuild only bundles the browser requests
Speeds up first start in big apps.
parcel --hmr-port <port>
Run the HMR socket on another port
parcel --no-autoinstall
Do not auto-install missing packages
Watch
parcel watch <entry>
Rebuild on change, no HTTP server
parcel watch --no-hmr
Watch without the HMR server
parcel watch --watch-dir <dir>
Set the root directory to watch
Useful in monorepos with nested lockfiles.
parcel watch --watch-for-stdin
Exit when stdin closes
Build
parcel build <entry>
One production build, then exit
parcel build 'src/*.html'
Build many entries by glob (quote it)
parcel buildUse the source field of package.json
parcel build --no-optimize
Skip minification and optimizations
parcel build --no-scope-hoist
Disable scope hoisting
parcel build --no-content-hash
Keep names free of content hashes
parcel build --detailed-report [n]
List the n largest assets per bundle
parcel build --no-source-maps
Do not emit source maps
Output and targets
--dist-dir <dir>
Output folder (default dist)
--public-url <url>
Prefix for absolute URLs in output
--target <name>
Build only the named target
Targets come from the targets key in package.json.
| Field | Purpose |
|---|---|
source |
Default entry file(s) |
main |
Library output path (CommonJS) |
module |
Library output path (ES module) |
browserslist |
Browsers to support |
targets |
Per-target dist, publicUrl, options |
Cache and diagnostics
--no-cacheDo not read from the cache
--cache-dir <path>
Move the cache (default .parcel-cache)
--log-level <level>
none, error, warn, info or verbose
--config <path>
Use another Parcel config or package
--reporter <pkg>
Add a reporter plugin (repeatable)
--profileRecord a CPU profile of the build
--traceRecord a trace of the build
parcel --version
Print the Parcel version
Config files
{ "extends": "@parcel/config-default", "transformers": { "*.svg": ["@parcel/transformer-svg-react"] }}"source": "src/index.html","targets": { "default": { "distDir": "./public", "publicUrl": "/app" }}Recipes
"scripts": { "start": "parcel src/index.html", "build": "parcel build src/index.html"}rm -rf dist .parcel-cachenpx parcel build src/index.html \ --public-url /docs/ --dist-dir site# package.json: "source", "main", "module"npx parcel watchnpx parcel build --no-optimizenpx parcel src/index.html --https --host 0.0.0.0
