PageSourceSearch

https://parceljs.org/docs/

html parceljs.org collected 2026-10-01 07:33:44 UTC 38,295 bytes, 544 lines download raw bytes

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.