htmlclean-loader
v1.0.12
Published
htmlclean loader module for webpack - Simple and safety HTML/SVG cleaner to minify without changing its structure.
Downloads
429
Maintainers
Readme
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.