1<!DOCTYPE html><html lang=en><meta name=viewport content="width=device-width, initial-scale=1.0"><meta name=description content="Learn how to start a new project, or migrate an existing project to Parcel 2."><title> 2 Parcel Documentation 3 </title><link href=https://parceljs.org/feed.xml rel=alternate type=application/rss+xml title="Blog RSS"><link rel="icon shortcut" href=https://parceljs.org/favicon.fe6f9d11.ico><link href=https://parceljs.org/404.c94c14d3.css rel=stylesheet>
3<script>let rootEl=document.querySelector("html");function updateMode(e){e?rootEl.classList.add("dark"):rootEl.classList.remove("dark")}let query=matchMedia&&matchMedia("(prefers-color-scheme: dark)"),isSystemDarkMode=query&&query.matches;query&&query.addListener(e=>{delete sessionStorage.isDarkMode,updateMode(e.matches)});let isDarkMode=JSON.parse(sessionStorage.getItem("isDarkMode"));null==isDarkMode&&(isDarkMode=isSystemDarkMode),updateMode(isDarkMode);</script>
3<link rel=preload as=style onload="this.onload=null;this.rel='stylesheet'" href=https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css>
3<script defer src=https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js></script>
3<script type=module src=https://parceljs.org/404.7afb6bce.js></script>
3<meta name=twitter:card content=summary><meta name=twitter:image content=https://parceljs.org/assets/og.png><meta name=twitter:site content=@parceljs><meta name=twitter:creator content=@parceljs><meta property=og:type content=website><meta property=og:locale content=en_US><meta property=og:url content=/docs/><meta property=og:title content="Parcel Documentation"><meta property=og:description content="Learn how to start a new project, or migrate an existing project to Parcel 2."><meta property=og:image content=https://parceljs.org/assets/og.png>
vendor: 63 bytes, line 3
3<script async src="https://www.googletagmanager.com/gtag/js?id=
3UA-110647385-1
vendor: 11 bytes, line 3
3"></script>
3<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-110647385-1");</script>
3<body> 4 <header class=parcel-docs-header> 5 <div class=left> 6 <button class=hamburger-button aria-label="Open navigation panel" aria-pressed=false> 7 <svg xmlns:xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M4 6h16M4 12h16M4 18h16"/></svg> 8 </button> 9 <a class=logo href=/> 10 <img class=parcel src=https://parceljs.org/parcel.fb905a63.png srcset="https://parceljs.org/[email protected] 2x" width=38 height=30 alt> 11 <img class=parcel-text src=https://parceljs.org/logo.0ac15b45.svg alt=Parcel width=120 height=25> 12 </a> 13 </div> 14 <nav class=section-picker> 15 <a class=selected href=/docs/>Docs</a> 16 <a href=/blog/v2-15-0/>Blog</a> 17 <a href=https://repl.parceljs.org/>REPL</a> 18 </nav> 19 <div class=search-container> 20 <svg aria-hidden=true fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg> 21 <input id=search-input aria-label=Search placeholder=Search...> 22 </div> 23 <div class=social-links> 24 <a href=https://github.com/parcel-bundler/parcel aria-label=GitHub> 25 <svg aria-hidden=true viewBox="0 0 20 20"><title>GitHub</title><path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"/></svg> 26 </a> 27 <button id=color-scheme-toggle title="Toggle color scheme"> 28 <svg aria-hidden=true viewBox="0 0 100 100"><mask id=color-scheme-toggle-mask><rect x=0 y=0 width=100 height=100 fill=white /><circle cx=70 cy=40 r=30 fill=black class=small-circle /></mask><circle cx=50 cy=50 r=45 stroke=currentColor stroke-width=8 stroke-dasharray="4 31" stroke-linecap=round fill=transparent class=sun-rays /><circle cx=50 cy=50 r=45 fill=currentColor mask=url(#color-scheme-toggle-mask) class=big-circle /></svg> 29</button> 30 31 </div> 32 </header> 33 <nav class=docs-navigation> 34 35 <ul><li> 36 <h3 id=gettingstarted-heading>Getting Started</h3> 37 <ul aria-labelledby=gettingstarted-heading> 38 39 <li> 40 <a href=/getting-started/webapp/>ð Web app</a> 41 </li> 42 <li> 43 <a href=/getting-started/library/>ð Library</a> 44 </li> 45 </ul> 46 <li> 47 <h3 id=migration-heading>Migration</h3> 48 <ul aria-labelledby=migration-heading> 49 50 <li> 51 <a href=/migration/cra/><img src=https://parceljs.org/react.0e9a8a0b.svg alt> Create React App</a> 52 </li> 53 <li> 54 <a href=/migration/parcel-1/>ð¦ Parcel 1</a> 55 </li> 56 </ul> 57 <li> 58 <h3 id=features-heading>Features</h3> 59 <ul aria-labelledby=features-heading> 60 61 <li> 62 <a href=/features/development/>ð§âð» Development</a> 63 </li> 64 <li> 65 <a href=/features/code-splitting/>âï¸ Code Splitting</a> 66 </li> 67 <li> 68 <a href=/features/dependency-resolution/>ð Dependency resolution</a> 69 </li> 70 <li> 71 <a href=/features/bundle-inlining/>ðª Bundle inlining</a> 72 </li> 73 <li> 74 <a href=/features/macros/>ð· Macros</a> 75 </li> 76 <li> 77 <a href=/features/targets/>ð¯ Targets</a> 78 </li> 79 <li> 80 <a href=/features/production/>ð Production</a> 81 </li> 82 <li> 83 <a href=/features/scope-hoisting/>ð³ Scope hoisting</a> 84 </li> 85 <li> 86 <a href=/features/node-emulation/>ð¢ Node Emulation</a> 87 </li> 88 <li> 89 <a href=/features/cli/>â¨ï¸ CLI</a> 90 </li> 91 <li> 92 <a href=/features/parcel-api/>ð Parcel API</a> 93 </li> 94 <li> 95 <a href=/features/profiling/>ð Profiling and tracing</a> 96 </li> 97 <li> 98 <a href=/features/plugins/>ð Plugins</a> 99 </li> 100 <li> 101 <a href=/plugin-browser/>ð Plugin Search</a> 102 </li> 103 </ul> 104 <li> 105 <h3 id=recipes-heading>Recipes</h3> 106 <ul aria-labelledby=recipes-heading> 107 108 <li>
109 <a href=/recipes/debugging/>ð ï¸ Debugging</a> 110 </li> 111 <li> 112 <a href=/recipes/image/><img src=https://parceljs.org/image.b7f45211.svg alt> Image</a> 113 </li> 114 <li> 115 <a href=/recipes/react/><img src=https://parceljs.org/react.0e9a8a0b.svg alt> React</a> 116 </li> 117 <li> 118 <a href=/recipes/rsc/><img src=https://parceljs.org/react.0e9a8a0b.svg alt> React Server Components</a> 119 </li> 120 <li> 121 <a href=/recipes/web-extension/><img class=dark-invert src=https://parceljs.org/webext.d5b294d7.svg alt> Web Extension</a> 122 </li> 123 </ul> 124 <li> 125 <h3 id=languages-heading>Languages</h3> 126 <ul aria-labelledby=languages-heading> 127 128 <li> 129 <a href=/languages/javascript/><img src=https://parceljs.org/javascript.d8f3929e.svg alt> JavaScript</a> 130 </li> 131 <li> 132 <a href=/languages/html/><img src=https://parceljs.org/html5.ac095c38.svg alt> HTML</a> 133 </li> 134 <li> 135 <a href=/languages/css/><img src=https://parceljs.org/postcss.b5fba897.svg alt> CSS</a> 136 </li> 137 <li> 138 <a href=/languages/svg/><img src=https://parceljs.org/svg.d0399e8b.svg alt> SVG</a> 139 </li> 140 <li> 141 <a href=/languages/typescript/><img src=https://parceljs.org/typescript.c0522967.svg alt> TypeScript</a> 142 </li> 143 <li> 144 <a href=/languages/mdx/><img src=https://parceljs.org/mdx.211081ba.svg alt> MDX</a> 145 </li> 146 <li> 147 <a href=/languages/sass/><img src=https://parceljs.org/sass.d753f53f.svg alt> Sass</a> 148 </li> 149 <li> 150 <a href=/languages/stylus/><img src=https://parceljs.org/stylus.ebde1552.svg class=dark-invert alt> Stylus</a> 151 </li> 152 <li> 153 <a href=/languages/less/><img src=https://parceljs.org/less.79bd0182.svg class=dark-invert alt> Less</a> 154 </li> 155 <li> 156 <a href=/languages/sugarss/><img src=https://parceljs.org/sugarss.6dde5820.svg alt> SugarSS</a> 157 </li> 158 <li> 159 <a href=/languages/vue/><img src=https://parceljs.org/vue.e7dd9a53.svg alt> Vue</a> 160 </li> 161 <li> 162 <a href=/languages/elm/><img src=https://parceljs.org/elm.7ff8bb0f.svg alt> Elm</a> 163 </li> 164 <li> 165 <a href=/languages/json/><img src=https://parceljs.org/json.d24daa1f.svg class=dark-invert alt> JSON</a> 166 </li> 167 <li> 168 <a href=/languages/toml/><img src=https://parceljs.org/toml.02927355.svg alt> TOML</a> 169 </li> 170 <li> 171 <a href=/languages/graphql/><img src=https://parceljs.org/graphql.7d160255.svg alt> GraphQL</a> 172 </li> 173 <li> 174 <a href=/languages/yaml/><img src=https://parceljs.org/yaml.1a91e96c.svg class=dark-invert alt> YAML</a> 175 </li> 176 <li> 177 <a href=/languages/glsl/><img src=https://parceljs.org/openGL.bdd2a837.svg alt> GLSL</a> 178 </li> 179 <li> 180 <a href=/languages/pug/><img src=https://parceljs.org/pug.5583c4da.svg alt> Pug</a> 181 </li> 182 <li> 183 <a href=/languages/coffeescript/><img src=https://parceljs.org/coffeescript.4c79f37b.svg class=dark-invert alt> CoffeeScript</a> 184 </li> 185 <li> 186 <a href=/languages/xml/><img src=https://parceljs.org/xml.bfecef9b.svg class=dark-invert alt> XML</a> 187 </li> 188 </ul> 189 <li> 190 <h3 id=pluginsystem-heading>Plugin System</h3> 191 <ul aria-labelledby=pluginsystem-heading> 192 193 <li> 194 <a href=/plugin-system/overview/>Overview</a> 195 </li> 196 <li> 197 <a href=/plugin-system/authoring-plugins/>Authoring Plugins</a> 198 </li> 199 <li> 200 <a href=/plugin-system/transformer/>Transformer</a> 201 </li> 202 <li> 203 <a href=/plugin-system/resolver/>Resolver</a> 204 </li> 205 <li> 206 <a href=/plugin-system/bundler/>Bundler</a> 207 </li> 208 <li> 209 <a href=/plugin-system/namer/>Namer</a> 210 </li> 211 <li> 212 <a href=/plugin-system/runtime/>Runtime</a> 213 </li> 214 <li> 215 <a href=/plugin-system/packager/>Packager</a> 216 </li> 217 <li> 218 <a href=/plugin-system/optimizer/>Optimizer</a> 219 </li> 220 <li> 221 <a href=/plugin-system/compressor/>Compressor</a> 222 </li> 223 <li> 224 <a href=/plugin-system/reporter/>Reporter</a> 225 </li> 226 <li> 227 <a href=/plugin-system/validator/>Validator</a> 228 </li> 229 <li> 230 <a href=/plugin-system/configuration/>Configuration</a> 231 </li> 232 <li> 233 <a href=/plugin-system/logging/>Diagnostics and Logging</a> 234 </li> 235 <li> 236 <a href=/plugin-system/source-maps/>Source Maps</a> 237 </li> 238 <li> 239 <a href=/plugin-system/api/>API</a> 240 </li> 241 </ul> 242 <li> 243 <h3 id=external-heading>External Links</h3> 244 <ul aria-labelledby=external-heading> 245 <li> 246 <a href=https://v1.parceljs.org target=_blank rel=noopener>Parcel v1</a> 247 </li> 248 <li> 249 <a href=https://cottonbureau.com/products/parcel-t-shirt target=_blank rel=noopener>Swag store</a> 250 </li> 251 <li> 252 <a href=https://github.com/parcel-bundler/parcel target=_blank rel=noopener>GitHub</a> 253 </li> 254 <li> 255 <a href=https://npmjs.com/package/parcel target=_blank rel=noopener>npm</a> 256 </li> 257 <li> 258 <a href=https://twitter.com/parceljs target=_blank rel=noopener>Twitter</a> 259 </li> 260 <li> 261 <a href=https://discord.gg/XSCzqGRuvr target=_blank rel=noopener>Discord</a> 262 </li> 263 </ul> 264 </li> 265 </ul> 266 267 </nav> 268
268<script type=module>let e="nav-scrollTop",o=document.querySelector(".docs-navigation"),s=sessionStorage.getItem(e);null!=s&&(o.scrollTop=Number(s)),window.addEventListener("pagehide",()=>{sessionStorage.setItem(e,o.scrollTop)});</script>
268 269 <main class="docs-home main-content"> 270 <article> 271 <header> 272 <h1> 273 Parcel Documentation 274 </h1> 275 <p class=summary> 276 <span></span> 277 278 </p> 279 </header> 280 281 282<h2>Getting started</h2> 283<p>Learn how to start a new project, or migrate an existing project to Parcel 2.</p> 284 285<div class="gap-3 grid max-w-5xl sm:grid-cols-3"> 286 <a href=/getting-started/webapp/ class="bg-gradient-to-r card dark:from-blue-800 dark:text-white dark:to-purple-800 from-blue-200 hover:scale-105 p-5 rounded-xl to-purple-200 transform transition"> 287 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> 288 <div class="font-bold mb-2 mt-4 text-lg">Building a webapp with Parcel</div> 289 <div>Learn how to set up a new web application from scratch with Parcel.</div> 290 </a> 291 <a href=/getting-started/library/ class="bg-gradient-to-r card dark:from-purple-800 dark:text-white dark:to-pink-800 from-purple-200 hover:scale-105 p-5 rounded-xl to-pink-200 transform transition"> 292 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"/></svg> 293 <div class="font-bold mb-2 mt-4 text-lg">Building a library with Parcel</div> 294 <div>Learn how to set up a Parcel to build a JavaScript library.</div> 295 </a> 296 <a href=/getting-started/migration/ class="bg-gradient-to-r card dark:from-pink-800 dark:text-white dark:to-orange-800 from-pink-200 hover:scale-105 p-5 rounded-xl to-orange-200 transform transition"> 297 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"/><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"/></svg> 298 <div class="font-bold mb-2 mt-4 text-lg">Migration</div> 299 <div>Migrate an existing project from Parcel 1 to Parcel 2.</div> 300 </a> 301</div> 302 303<h2>Features</h2> 304<p>Learn about Parcel's core features.</p> 305 306<div class="gap-3 grid max-w-5xl md:grid-cols-4 sm:grid-cols-2"> 307 <a href=/features/development/ class="bg-gradient-to-r card dark:from-fuchsia-800 dark:text-white dark:to-purple-800 from-fuchsia-200 p-5 rounded-xl to-purple-200"> 308 <div class="flex gap-2 items-start mb-2"> 309 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg> 310 <div class="font-bold text-lg">Development</div> 311 </div> 312 <div>Learn about Parcel's dev server, hot reloading, lazy mode, caching, and more.</div> 313 </a> 314 <a href=/features/code-splitting/ class="bg-gradient-to-r card dark:from-purple-800 dark:text-white dark:to-violet-800 from-purple-200 p-5 rounded-xl to-violet-200"> 315 <div class="flex gap-2 items-start mb-2"> 316 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 5.758a3 3 0 10-4.243 4.243 3 3 0 004.243-4.243zm0-5.758a3 3 0 10-4.243-4.243 3 3 0 004.243 4.243z"/></svg> 317 <div class="font-bold text-lg">Code Splitting</div> 318 </div> 319 <div>How to use dynamic imports and Parcel's automatic shared bundles.</div> 320 </a> 321 <a href=/features/dependency-resolution/ class="bg-gradient-to-r card dark:from-fuchsia-800 dark:text-white dark:to-purple-800 from-fuchsia-200 md:dark:from-violet-800 md:dark:to-indigo-800 md:from-violet-200 md:to-indigo-200 p-5 rounded-xl to-purple-200"> 322 <div class="flex gap-2 items-start mb-2"> 323 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 16l2.879-2.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> 324 <div class="font-bold text-lg">Resolution</div> 325 </div> 326 <div>How dependencies are resolved, url schemes, aliases, and more.</div> 327 </a> 328 <a href=/features/bundle-inlining/ class="bg-gradient-to-r card dark:from-purple-800 dark:text-white dark:to-violet-800 from-purple-200 md:dark:from-indigo-800 md:dark:to-blue-800 md:from-indigo-200 md:to-blue-200 p-5 rounded-xl to-violet-200"> 329 <div class="flex gap-2 items-start mb-2"> 330 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg> 331 <div class="font-bold text-lg">Bundle Inlining</div> 332 </div> 333 <div>How to inline the compiled contents of one bundle inside another.</div> 334 </a> 335 <a href=/features/targets/ class="bg-gradient-to-r card dark:from-fuchsia-800 dark:text-white dark:to-purple-800 from-fuchsia-200 p-5 rounded-xl to-purple-200"> 336 <div class="flex gap-2 items-start mb-2"> 337 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg> 338 <div class="font-bold text-lg">Targets</div> 339 </div> 340 <div>How to compile your source code for multiple targets.</div> 341 </a> 342 <a href=/features/production/ class="bg-gradient-to-r card dark:from-purple-800 dark:text-white dark:to-violet-800 from-purple-200 p-5 rounded-xl to-violet-200"> 343 <div class="flex gap-2 items-start mb-2"> 344 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg> 345 <div class="font-bold text-lg">Production</div> 346 </div> 347 <div>Minification, tree shaking, compression, content hashing, and more.</div> 348 </a> 349 <a href=/features/scope-hoisting/ class="bg-gradient-to-r card dark:from-fuchsia-800 dark:text-white dark:to-purple-800 from-fuchsia-200 md:dark:from-violet-800 md:dark:to-indigo-800 md:from-violet-200 md:to-indigo-200 p-5 rounded-xl to-purple-200"> 350 <div class="flex gap-2 items-start mb-2"> 351 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg> 352 <div class="font-bold text-lg">Scope hoisting</div> 353 </div> 354 <div>Dig into the details of how Parcel's tree shaking implementation works.</div> 355 </a> 356 <a href=/features/node-emulation/ class="bg-gradient-to-r card dark:from-purple-800 dark:text-white dark:to-violet-800 from-purple-200 md:dark:from-indigo-800 md:dark:to-blue-800 md:from-indigo-200 md:to-blue-200 p-5 rounded-xl to-violet-200"> 357 <div class="flex gap-2 items-start mb-2"> 358 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/></svg> 359 <div class="font-bold text-lg">Node emulation</div> 360 </div> 361 <div>Using Node.js features like environment variables and builtin module polyfills.</div> 362 </a> 363 <a href=/features/cli/ class="bg-gradient-to-r card dark:from-fuchsia-800 dark:text-white dark:to-purple-800 from-fuchsia-200 p-5 rounded-xl to-purple-200"> 364 <div class="flex gap-2 items-start mb-2"> 365 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> 366 <div class="font-bold text-lg">CLI</div> 367 </div> 368 <div>A reference for all of the options available in the Parcel CLI.</div> 369 </a> 370 <a href=/features/parcel-api/ class="bg-gradient-to-r card dark:from-purple-800 dark:text-white dark:to-violet-800 from-purple-200 p-5 rounded-xl to-violet-200"> 371 <div class="flex gap-2 items-start mb-2"> 372 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
372</svg> 373 <div class="font-bold text-lg">Parcel API</div> 374 </div> 375 <div>Run Parcel builds programmatically to integrate into any build.</div> 376 </a> 377 <a href=/features/plugins/ class="bg-gradient-to-r card dark:from-fuchsia-800 dark:text-white dark:to-purple-800 from-fuchsia-200 md:dark:from-violet-800 md:dark:to-indigo-800 md:from-violet-200 md:to-indigo-200 p-5 rounded-xl to-purple-200"> 378 <div class="flex gap-2 items-start mb-2"> 379 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg> 380 <div class="font-bold text-lg">Plugins</div> 381 </div> 382 <div>Overriding and extending Parcel's defaults using plugins.</div> 383 </a> 384</div> 385 386<h2>Languages and Frameworks</h2> 387<p>Learn how to use the most common languages and frameworks with Parcel. See the side navigation for even more.</p> 388<div class="gap-3 grid max-w-5xl md:grid-cols-4 sm:grid-cols-2"> 389 <a href=/languages/html/ class="bg-gradient-to-br card dark:from-purple-800 dark:text-white dark:to-indigo-800 from-purple-200 p-5 rounded-xl to-indigo-200"> 390 <div class="flex gap-2 items-start mb-2"> 391 <img src=https://parceljs.org/html5.ac095c38.svg alt class=w-6> 392 <div class="font-bold text-lg">HTML</div> 393 </div> 394 <div>The entry of most Parcel apps. From here, you can reference scripts, styles, images, and more.</div> 395 </a> 396 <a href=/languages/javascript/ class="bg-gradient-to-br card dark:from-purple-800 dark:text-white dark:to-indigo-800 from-purple-200 p-5 rounded-xl to-indigo-200"> 397 <div class="flex gap-2 items-start mb-2"> 398 <img src=https://parceljs.org/javascript.d8f3929e.svg alt class=w-6> 399 <div class="font-bold text-lg">JavaScript</div> 400 </div> 401 <div>Using ES modules and CommonJS, setting up transpilation, JSX, workers, and more.</div> 402 </a> 403 <a href=/languages/css/ class="bg-gradient-to-br card dark:from-purple-800 dark:text-white dark:to-indigo-800 from-purple-200 p-5 rounded-xl to-indigo-200"> 404 <div class="flex gap-2 items-start mb-2"> 405 <img src=https://parceljs.org/css.2d0fa9d4.svg alt class=w-6> 406 <div class="font-bold text-lg">CSS</div> 407 </div> 408 <div>Using CSS with Parcel, including dependencies, CSS modules, PostCSS, and more.</div> 409 </a> 410 <a href=/languages/svg/ class="bg-gradient-to-br card dark:from-purple-800 dark:text-white dark:to-indigo-800 from-purple-200 p-5 rounded-xl to-indigo-200"> 411 <div class="flex gap-2 items-start mb-2"> 412 <img src=https://parceljs.org/svg.d0399e8b.svg alt class=w-6> 413 <div class="font-bold text-lg">SVG</div> 414 </div> 415 <div>Referencing SVG from HTML, CSS, JavaScript, and JSX, including scripts and styles, and more.</div> 416 </a> 417 <a href=/languages/typescript/ class="bg-gradient-to-br card dark:from-purple-800 dark:text-white dark:to-indigo-800 from-purple-200 p-5 rounded-xl to-indigo-200"> 418 <div class="flex gap-2 items-start mb-2"> 419 <img src=https://parceljs.org/typescript.c0522967.svg alt class=w-6> 420 <div class="font-bold text-lg">TypeScript</div> 421 </div> 422 <div>Using TypeScript with Parcel, including transpilation and generating typings.</div> 423 </a> 424 <a href=/recipes/image/ class="bg-gradient-to-br card dark:from-purple-800 dark:text-white dark:to-indigo-800 from-purple-200 p-5 rounded-xl to-indigo-200"> 425 <div class="flex gap-2 items-start mb-2"> 426 <svg aria-hidden=true class="h-6 w-6" viewBox="0 0 20 20" fill=currentColor><path fill-rule=evenodd d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule=evenodd /></svg> 427 <div class="font-bold text-lg">Images</div> 428 </div> 429 <div>Resizing, converting, and optimizing images.</div> 430 </a> 431 <a href=/recipes/react/ class="bg-gradient-to-br card dark:from-purple-800 dark:text-white dark:to-indigo-800 from-purple-200 p-5 rounded-xl to-indigo-200"> 432 <div class="flex gap-2 items-start mb-2"> 433 <img src=https://parceljs.org/react.0e9a8a0b.svg alt class=w-6> 434 <div class="font-bold text-lg">
434React</div> 435 </div> 436 <div>Using React with Parcel, including Fast Refresh, styling, images, code splitting, and more.</div> 437 </a> 438 <a href=/languages/vue/ class="bg-gradient-to-br card dark:from-purple-800 dark:text-white dark:to-indigo-800 from-purple-200 p-5 rounded-xl to-indigo-200"> 439 <div class="flex gap-2 items-start mb-2"> 440 <img src=https://parceljs.org/vue.e7dd9a53.svg alt class=w-6> 441 <div class="font-bold text-lg">Vue</div> 442 </div> 443 <div>Using Vue 3 SFCs with Parcel.</div> 444 </a> 445</div> 446 447<h2>Plugin System</h2> 448<p>Learn how to customize and extend Parcel's defaults with your own plugins.</p> 449 450<h3>Concepts</h3> 451<div class="gap-3 grid max-w-5xl md:grid-cols-4 sm:grid-cols-2"> 452 <a href=/plugin-system/overview/ class="bg-gradient-to-br card dark:from-indigo-800 dark:text-white dark:to-purple-800 from-indigo-200 p-5 rounded-xl sm:bg-gradient-to-r to-purple-200"> 453 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/></svg> 454 <div class="font-bold mb-2 mt-4 text-lg">Plugin System</div> 455 <div>An overview of Parcel's architecture and core data structures.</div> 456 </a> 457 <a href=/plugin-system/authoring-plugins/ class="bg-gradient-to-br card dark:from-purple-800 dark:text-white dark:to-pink-800 from-purple-200 p-5 rounded-xl sm:bg-gradient-to-r to-pink-200"> 458 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg> 459 <div class="font-bold mb-2 mt-4 text-lg">Authoring Plugins</div> 460 <div>An introduction to Parcel's Plugin APIs, and a guide to publishing a plugin package.</div> 461 </a> 462 <a href=/plugin-system/logging/ class="bg-gradient-to-br card dark:from-pink-800 dark:text-white dark:to-rose-800 from-pink-200 md:dark:from-pink-800 md:dark:to-rose-800 md:from-pink-200 md:to-rose-200 p-5 rounded-xl sm:bg-gradient-to-r sm:dark:from-indigo-800 sm:dark:to-purple-800 sm:from-indigo-200 sm:to-purple-200 to-rose-200"> 463 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg> 464 <div class="font-bold mb-2 mt-4 text-lg">Diagnostics</div> 465 <div>How to emit errors and logs using Parcel's unified diagnostics format.</div> 466 </a> 467 <a href=/plugin-system/source-maps/ class="bg-gradient-to-br card dark:from-rose-800 dark:text-white dark:to-orange-800 from-rose-200 md:dark:from-rose-800 md:dark:to-orange-800 md:from-rose-200 md:to-orange-200 p-5 rounded-xl sm:bg-gradient-to-r sm:dark:from-purple-800 sm:dark:to-pink-800 sm:from-purple-200 sm:to-pink-200 to-orange-200"> 468 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/></svg> 469 <div class="font-bold mb-2 mt-4 text-lg">Source Maps</div> 470 <div>How to work with Parcel's source maps library in your plugin.</div> 471 </a> 472</div> 473 474<h3>Plugin Types</h3> 475<div class="gap-3 grid max-w-5xl md:grid-cols-4 sm:grid-cols-2"> 476 <a href=/plugin-system/transformer/ class="bg-gradient-to-r card dark:from-purple-800 dark:text-white dark:to-indigo-800 from-purple-200 p-5 rounded-xl to-indigo-200"> 477 <div class="flex gap-2 items-start mb-2"> 478 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg> 479 <div class="font-bold text-lg">Transformer</div> 480 </div> 481 <div>Compile individual source files and extract dependencies.</div> 482 </a> 483 <a href=/plugin-system/resolver/ class="bg-gradient-to-r card dark:from-indigo-800 dark:text-white dark:to-blue-800 from-indigo-200 p-5 rounded-xl to-blue-200"> 484 <div class="flex gap-2 items-start mb-2"> 485 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 16l2.879-2.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> 486 <div class="font-bold text-lg">Resolver</div> 487 </div> 488 <div>Resolve a dependency to a file path or virtual module.</div> 489 </a> 490 <a href=/plugin-system/namer/ class="bg-gradient-to-r card dark:from-purple-800 dark:text-white dark:to-indigo-800 from-purple-200 md:dark:from-blue-800 md:dark:to-sky-800 md:from-blue-200 md:to-sky-200 p-5 rounded-xl to-indigo-200"> 491 <div class="flex gap-2 items-start mb-2"> 492 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg> 493 <div class="font-bold text-lg">Namer</div> 494 </div> 495 <div>Determine the name of an output file.</div> 496 </a> 497 <a href=/plugin-system/packager/ class="bg-gradient-to-r card dark:from-indigo-800 dark:text-white dark:to-blue-800 from-indigo-200 md:dark:from-sky-800 md:dark:to-sky-800 md:from-sky-200 md:to-sky-200 p-5 rounded-xl to-blue-200"> 498 <div class="flex gap-2 items-start mb-2"> 499 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg> 500 <div class="font-bold text-lg">Packager</div> 501 </div> 502 <div>Combine multiple assets together into a single output file.</div> 503 </a> 504 <a href=/plugin-system/optimizer/ class="bg-gradient-to-r card dark:from-purple-800 dark:text-white dark:to-indigo-800 from-purple-200 p-5 rounded-xl to-indigo-200"> 505 <div class="flex gap-2 items-start mb-2"> 506 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg> 507 <div class="font-bold text-lg">Optimizer</div> 508 </div> 509 <div>Minify, optimize, and transform output files.</div> 510 </a> 511 <a href=/plugin-system/compressor/ class="bg-gradient-to-r card dark:from-indigo-800 dark:text-white dark:to-blue-800 from-indigo-200 p-5 rounded-xl to-blue-200"> 512 <div class="flex gap-2 items-start mb-2"> 513 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg> 514 <div class="font-bold text-lg">Compressor</div> 515 </div> 516 <div>Compress and encode output files in multiple formats.</div> 517 </a> 518 <a href=/plugin-system/reporter/ class="bg-gradient-to-r card dark:from-purple-800 dark:text-white dark:to-indigo-800 from-purple-200 md:dark:from-blue-800 md:dark:to-sky-800 md:from-blue-200 md:to-sky-200 p-5 rounded-xl to-indigo-200"> 519 <div class="flex gap-2 items-start mb-2"> 520 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg> 521 <div class="font-bold text-lg">Reporter</div> 522 </div> 523 <div>Receive events on build progress and completion.</div> 524 </a> 525 <a href=/plugin-system/configuration/ class="bg-gradient-to-r card dark:from-indigo-800 dark:text-white dark:to-blue-800 from-indigo-200 md:dark:from-sky-800 md:dark:to-sky-800 md:from-sky-200 md:to-sky-200 p-5 rounded-xl to-blue-200"> 526 <div class="flex gap-2 items-start mb-2"> 527 <svg aria-hidden=true class="flex-shrink-0 h-6 w-6" fill=none viewBox="0 0 24 24" stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg> 528 <div class="font-bold text-lg">Configuration</div> 529 </div> 530 <div>Share Parcel configuration between projects.</div> 531 </a> 532</div> 533 534<style>.docs-home li img{width:1em}.card{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y));outline-offset:2px;outline:2px solid #0000;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.card:hover,.card:focus{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y));--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;
534--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}</style> 535 536 537 538 </article> 539 540 541 542 </main> 543 544
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.