Never Patronize Mothers

    minify-template-literal-loader

    0.0.3 • Public • Published

    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 template files and minifies them with html-minifier.

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

    Why?

    Although webpack can be extremely powerful, it does some unconventional things to get results - like importing html...

    // let's face it, this is weird
    import template from 'template.html';

    The above line of code is not native javascript, and even when ES modules are widely supported in all browsers, you'll still need webpack to process this.

    Reasons to use template literals as templates:

    • Writing templates in javascript gives us a nice way to import them anywhere we need it - no preprocessing needed when ES modules are supported.

    • Don't get stuck in webpack! All this loader does is minify html.

    • Interpolate as needed:

      import svgTemplate from './svgTemplate';
      export default `<div>${svgTemplate}</div>`;
    • You can tag your template literals to add some extra processing on the client side:

      export default doMoreThings `<div>template</div>`

    Install

    $ npm install -D minify-template-literal-loader html-minifier

    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-template-literal-loader',
        options: {
          caseSensitive: true,
          collapseWhitespace: true
        }
      }
    ]

    Options

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

    Keywords

    none

    Install

    npm i minify-template-literal-loader

    DownloadsWeekly Downloads

    50

    Version

    0.0.3

    License

    MIT

    Last publish

    Collaborators

    • geoctrl