Parcel detects most references in HTML to other files (such as
<meta property="og:image">) and processes them as well. These references are rewritten so that they link to the correct output files.
File names are resolved relative to the current HTML file, but you can also use absolute and tilde specifiers. See Dependency resolution for details.
<link rel="stylesheet"> element can be used to reference stylesheets from HTML. You can reference a CSS file, or any other file that compiles to CSS such as SASS, Less, or Stylus.
See the CSS docs for details on how CSS is processed by Parcel.
type="module" attribute should be used to indicate that a file is an ES module or CommonJS file. If it is omitted, then the referenced file is treated as a classic script. See Classic scripts for more information about this.
<script type="module"> is used, Parcel will automatically generate a
<script nomodule> version as well if some of your browser targets do not support ES modules. See Differential bundling for more details.
Parcel also supports the
defer attributes of the
<script> element. When a script is
async, it may load in an arbitrary order at runtime. Therefore, Parcel treats async scripts as "isolated”. This means that async scripts cannot share any dependencies with other scripts on the page, which may result in duplication of modules. For this reason, it's better to avoid
async scripts except in specific circumstances.
defer attribute has a similar effect as
async (non render-blocking), but guarentees that scripts are executed in the order they are defined in the HTML file. When using
defer is automatically enabled and does not need to be declared.
See the MDN docs for the
Parcel supports images referenced via the
<img> element. The
src attribute can be used to reference an image file.
<img src="image.jpg" alt="An image">
Parcel also supports the
srcset attribute, which allows referencing multiple versions of an image for different sizes or resolutions.
<img src="email@example.com" srcset="firstname.lastname@example.org 2x" alt="logo">
In addition, Parcel supports the
<picture> element, which allows even more flexibility for providing multiple alternative images via the
Parcel’s image transformer can also be used to generate multiple versions of an image from a single source file. This is done using query parameters to provide the width, height, and format to convert and resize the source image.
<source type="image/webp" srcset="image.jpg?as=webp&width=400, image.jpg?as=webp&width=800 2x">
<source type="image/jpeg" srcset="image.jpg?width=400, image.jpg?width=800 2x">
<img src="image.jpg?width=400" width="400">
Links and iframes#
Parcel supports the
<a> element to link to another page from an HTML file.
<a href="other.html">Other page</a>
<iframe> element can be used to embed an HTML page inside another.
While other assets referenced from an HTML file will include a content hash in their compiled filename by default, files referenced by an
<iframe> element will not. That's because these URLs are typically human readable, and need to have a stable name over time. Bundle naming can be overridden by Namer plugins.
Video, audio, and other assets#
<object> elements are supported. The referenced URLs are processed by Parcel and rewritten to include a content hash.
Open Graph and Schema.org metadata#
Parcel supports Open Graph, Twitter Cards, VK, Schema.org, and Microsoft pinned site metadata defined using the
<meta> tag. Images and other URLs referenced in these elements are processed by Parcel and rewritten to include a content hash.
<meta property="og:image" content="100x100.png" />
<link rel="manifest"> element is supported to reference a Web manifest. This is a JSON file that includes various metadata about the app, and allows it to be installed to the user's home screen or desktop. Parcel processes the URLs referenced in the
screenshots keys in this file. Web manifests may be written in either a
<link rel="manifest" href="manifest.json">
Inline scripts and styles#
<style> tags with text content are also processed just like standalone files, and the generated bundles are inserted back into the HTML file. The
type="module" attribute on script tags works just as described above for external scripts. However, if some of your browser targets don't support ES modules natively, Parcel will only compile inline scripts to a non-module script and will not output a
<script type="module"> in order to keep the generated HTML small.
style attribute can be used on any HTML element to define CSS styles. Parcel will process the inline CSS, and insert the result back into the
style attribute. This includes following referenced URLs such as background images, as well as applying PostCSS plugins like autoprefixer.
<div style="background: url(background.jpg)">Hello!</div>
Parcel supports inline SVG in HTML. Images referenced via the
<image> element and dependencies referenced via the
<use> element are supported, and inline scripts and styles within the SVG are also processed as described above.
<rect x="10" y="10" width="50" height="50" fill="red" />
Parallel scripts and styles#
<link> element into the
<link rel="stylesheet" src="app.f8e9c6.css">
<script type="module" src="app.26fce9.js"></script>
<script> tag into the compiled HTML to load this "shared bundle" in parallel. See Code Splitting for more details.
PostHTML is a tool for transforming HTML with plugins. You can configure PostHTML by creating a configuration file using one of these names:
.posthtmlrc (JSON, strongly recommended),
Install plugins in your app:
yarn add posthtml-doctype --dev
Then, create a config file:
Plugins are specified in the plugins object as keys, and options are defined using object values. If there are no options for a plugin, just set it to an empty object instead.
This example uses posthtml-include to inline another HTML file.
For some plugins that require passing a function as a configuration option, or to set up plugins based on
process.env.NODE_ENV, you need to use a
posthtml.config.js file for configuration instead of
This example uses posthtml-shorten to shorten URLs using a custom shortening function.
yarn add posthtml-shorten --dev
In production mode, Parcel includes optimizations to reduce the file size of your code. See Production for more details about how this works.
In production mode, Parcel automatically minifies your code to reduce the file sizes of your bundles. By default, Parcel uses htmlnano to perform HTML minification. To configure htmlnano, you can create a
.htmlnanorc.json file in your project root directory.
For example to retain HTML comments
or to not minify SVG elements.