htmlclean-loader

htmlclean loader module for webpack.

• Grunt plugin: grunt-htmlclean
• gulp plugin: gulp-htmlclean

If you want to just clean files, Command Line Tool is easy way.

Simple and safety HTML/SVG cleaner to minify without changing its structure.
See htmlclean for options and more information about htmlclean.

Installation

npm install --save-dev htmlclean-loader htmlclean

Usage

Documentation:

• Loaders
• Using loaders (for webpack v1)

For example:

// app.js
var headerHtml = require('./header.html');
document.getElementById('header').innerHTML = headerHtml;

// webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.html$/,
      loader: 'htmlclean-loader'
    }]
  }
};

Options

You can specify options via query parameters or an options (or htmlcleanLoader for webpack v1) object in webpack configuration.

For example:

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.html$/,
      loader: 'htmlclean-loader',
      options: {
        protect: /<\!--%fooTemplate\b.*?%-->/g,
        edit: function(html) {
          return html.replace(/foo/g, 'bar');
        }
      }
    }]
  }
};

See htmlclean for the options.
Also, the following additional option is available.

raw

Type: boolean
Default: Automatic

This loader outputs a JavaScript code when it is specified as a final loader, otherwise it outputs a raw HTML code for next loader that expects it to be given, automatically.
That is, when it is specified as a final loader, it works like that a raw-loader is chained to the list of loaders.
For example, the following two codes work same:

// webpack.config.js
module.exports = {
  // ...
  module: {
    // Actually, `raw-loader` is unnecessary.
    rules: [{test: /\.html$/, use: ['raw-loader', 'htmlclean-loader']}]
    // htmlclean-loader passes a raw HTML code to raw-loader,
    // and raw-loader changes it to a JavaScript code and outputs it.
  }
};

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [{test: /\.html$/, loader: 'htmlclean-loader'}]
    // htmlclean-loader outputs a JavaScript code.
  }
};

By default, it chooses the JavaScript code or the raw HTML code automatically.
If true is specified for raw option, it chooses a raw HTML code always. If false is specified for raw option, it chooses a JavaScript code always.