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. Relative filenames are resolved relative to the current HTML file.
<script> tags just like the browser does natively. By default, scripts execute in a global environment, and features like
require are not supported. However, when a
<script type="module"> is used, scripts are treated as modules in their own scope, and can import and export other modules. Features like dynamic
new Worker, and
navigator.serviceWorker.register are supported in both module and classic scripts. In general, you will want to use
<script type="module"> for modern code, however, for legacy scripts like some older libraries that rely on being executed in a global environment, you can use a script without a
One noteworthy aspect of this is that
<script type="module"> automatically transpiles to a modern browser target, which will generally be much smaller than transpiling for old browsers. If not all of your browser targets support ES modules natively, then Parcel will also automatically generate a
nomodule fallback, which will be transpiled to your lowest browser target. See the Generic Webapp guide for more details.
¶ Inline script and style tags
<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 not all of your browser targets support ES modules natively, Parcel will only compile inline scripts to that target and will not output ESM in order to keep the generated HTML small.
style properties on HTML elements are turned into CSS assets, then PostCSS plugins are applied if configured and the result gets minified.
<div style="-moz-text-decoration:underline red;text-decoration:underline red">
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),
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 an empty object instead, another example:
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
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).
The result should be:
If minification is enabled (e.g.
parcel build without
--no-optimize) all bundles are automatically processed with htmlnano.
It can be configured according to its documentation with a .htmlnanorc (JSON) or .htmlnanorc.js file. Make sure to delete the .parcel-cache directory after changing htmlnano settings.
For example to retain HTML comments
or to not minify SVG elements.