HTML (PostHTML)
HTML assets are often the entry file that you provide to Parcel, but can also be referenced by JavaScript files, e.g. to provide links to other pages.
ΒΆ Dependencies
Parcel detects most references in HTML to other files (such as <script src="..."
, <img src="...">
, <video>
or <meta property="og:image">
) and processes them as well. These references are rewritten so that they link to the correct output files. Relative filenames are resolved relative to the current HTML file.
One noteworthy aspect of this is that <script type="module">
automatically creates a ESM JavaScript bundle (and restricting the Browserslist config to browsers supporting ESM). Together with <script nomodule>
, this makes differential serving very straight forward (see also Generic Webapp).
ΒΆ Inline script and style tags
<script>
and <style>
tags with text content are also processed just like standalone files and the generated bundles are inserted back into the HTML file.
ΒΆ Inline style
attribute
Inline style
properties on HTML elements are turned into CSS assets, then PostCSS plugins are applied if configured and the result gets minified.
Output:
<!DOCTYPE html>
<div style="-moz-text-decoration:underline red;text-decoration:underline red">
Hello!
</div>
ΒΆ PostHTML
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 recommend), .posthtmlrc.js
, or posthtml.config.js
.
Install plugins in your app:
yarn add posthtml-doctype
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 true
or an empty object instead, another example:
ΒΆ posthtml.config.js
For some plugins that require passing a method 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 .posthtmlrc
.
npm i posthtml-modules posthtml-shorten -D
Note that for the usage of posthtml-modules defined locals cannot have a hyphen/dash (-
) within their name, otherwise Parcel fails at compilation.
Furthermore, modules do not reload with HMR, unless you modify the file where you use them (in this case index.html).
ΒΆ htmlnano
If minification is enabled (e.g. parcel build
without --no-minify
) all bundles are automatically processed with htmlnano.
It can be configured according to its documentation with a .htmlnanorc (JSON) or .htmlnanorc.js file, for example to retain HTML comments
or to not minify SVG elements.