minify-lit-elt-template-literal-loader

Minify Template Literal Loader

Webpack loader that minifies javascript files that contain template literals

Peer Dependency

html-minifier

What this loader does

This loader takes .js files with html and css literals and minifies them with html-minifier and clean-css.

// converts this:
export default
html`<div>
    Awesome Template
</div>`;
 
// to this:
export default html`<div>Awesome Template</div>`;

Install

$ npm install -D minify-lit-elt-template-literal-loader

Use

Add this loader to your webpack rules BEFORE running through a transpiler like babel.

Remember, webpack runs loaders right-to-left, and bottom-to-top:

config.module.rules = [
  {
    test: /\.js$/,
    loader: 'babel-loader'
  },
  {
    test: /\.template\.js$/,
    loader: 'minify-lit-elt-template-literal-loader',
    options: {
      caseSensitive: true,
      collapseWhitespace: true
    }
  }
  {
    test: /\.tsx?$/,
    use: 'ts-loader',
    exclude: /node_modules/,
  }
]

Options

The options object is a pass-through to the html-minifier options. Go to html-minifier's github page to learn more.