minify-lit-html-loader v0.0.4

npm install minify-lit-html-loader

Documentation: Using loaders

Within your webpack configuration object, you'll need to add the minify-lit-html-loader to the list of modules, like so:

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'minify-lit-html-loader'
      }
    }
  ]
}

Or if you are using Typescript, chain it after your Typescipt loader, like so:

module: {
  rules: [
    {
      test: /\.ts?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'minify-lit-html-loader',
        },
        {
          loader: 'ts-loader'
        },
      ]
    }
  ]
}

Options for the esprima parser are:

interface Config {
  range: boolean;
  loc: boolean;
  source: string | null;
  tokens: boolean;
  comment: boolean;
  tolerant: boolean;
  sourceType: 'module' | 'script';
}

range and loc will always be set to true as these are required for the operation of the loader.

Options for html-minifier can be found here

You can pass options to the loader by using the options property:

module: {
  rules: [
    {
      test: /\.js?$/,
      exclude: /(node_modules|bower_components)/,
      use: [
        {
          loader: 'minify-lit-html-loader',
          options: {
            esprima: {
              loc: true,
            },
            htmlMinifier: {
              customAttrCollapse: /events/,
            }
          }
        },
      ],
    }
  ]
},

The default options for html-minifier are:

htmlMinifier: {
  caseSensitive: true,
  collapseWhitespace: true,
  minifyCSS: true,
  preventAttributesEscaping: true,
  removeComments: true
}

Recommended Options

The arguments below for ignoring custom fragments are recommended because without them, the minifier will have a parsing error if it encounters any less-than (<) or less-than-or-equal-to (<=) operators in your lit-html string.

{
  loader: 'minify-lit-html-loader',
  options: {
    htmlMinifier: {
      ignoreCustomFragments: [
        /<\s/,
        /<=/
      ]
    }
  }
},

There are currently no automated tests written for the loader and it has only been tested in a very limited way. It will be something I will be working on soon but I do welcome PRs from anyone willing to contribute to this project.