html-module-loader

HTML Module Loader

Exports HTML files as in HTML Module proposal

This module is just to put in practice a concept, DO NOT use it in production.

Install

# npm
npm i -D html-module-loader
# yarn
yarn add --dev html-module-loader

Usage

{
  test: /\.html$/,
  use: {
    loader: 'html-module-loader',
    options: {
      minify: true
    }
  }
}

Options

// src/index.ts
import { OptionObject } from 'loader-utils'
import { Options as HTMLMinifierOptions } from 'html-minifier'

export interface Options extends OptionObject {
  minify?: boolean | HTMLMinifierOptions
}

minify

By default true in production and false in development.

It also accepts an object equivalent to the options passed to the html-minifier package

HTML Module

HTML modules is a proposal to add html files as part of the ES Modules. It is an alternative to the deprecated HTML imports

The idea is to enable developers to incorporate code that depends on markup (very common with Web Components) easily into the JS flow. For example:

<!-- ./HTML5-Element.html -->
<template id="html5ElementTemplate">
  <style>
      .outerDiv {
          border:0.1em solid blue;
          display:inline-block;
          padding: 0.4em;
      }
      .devText {
          font-weight: bold;
          font-size: 1.4em;
          text-align: center;
          margin-top: 0.3em;
      }
      .mainImage {
          height:254px;
      }
  </style>
  <div class="outerDiv">
      <img class="mainImage" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" />
      <div class="devText">HTML Modules Are Great!</div>
  </div>
</template>
<script type="module">
  const template = import.meta.document.getElementById("html5ElementTemplate")
  export default class HTML5Element extends HTMLElement {
      constructor() {
          super()
          this.attachShadow({ mode: 'open' })
          .appendChild(template.content.cloneNode(true))
      }
  }
</script>

// ./main.js
import HTML5Element from './HTML5-Element.html'

customElements.define("html5-element", HTML5Element)

The import.meta.document refers to the document that represents the HTML file itself, it is not equivalent to document, as stated in the HTML Module explainer.

This loader uses DOMParser to parse the file as whole into a Document