Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anseki/htmlclean-loader
htmlclean loader module for webpack - Simple and safety HTML/SVG cleaner to minify without changing its structure.
https://github.com/anseki/htmlclean-loader
clean comment compress html javascript lightweight linebreak loader minify svg webpack webpack-configuration whitespace
Last synced: 10 days ago
JSON representation
htmlclean loader module for webpack - Simple and safety HTML/SVG cleaner to minify without changing its structure.
- Host: GitHub
- URL: https://github.com/anseki/htmlclean-loader
- Owner: anseki
- License: mit
- Created: 2016-12-01T20:20:56.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-09T22:16:12.000Z (almost 2 years ago)
- Last Synced: 2024-12-16T20:32:17.379Z (17 days ago)
- Topics: clean, comment, compress, html, javascript, lightweight, linebreak, loader, minify, svg, webpack, webpack-configuration, whitespace
- Language: JavaScript
- Size: 84 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# htmlclean-loader
[](https://www.npmjs.com/package/htmlclean-loader) [](https://github.com/anseki/htmlclean-loader/issues) [](package.json) [](LICENSE)
[htmlclean](https://github.com/anseki/htmlclean) loader module for [webpack](https://webpack.js.org/).
* [Grunt](http://gruntjs.com/) plugin: [grunt-htmlclean](https://github.com/anseki/grunt-htmlclean)
* [gulp](http://gulpjs.com/) plugin: [gulp-htmlclean](https://github.com/anseki/gulp-htmlclean)
**If you want to just clean files, [Command Line Tool](https://github.com/anseki/htmlclean-cli) is easy way.**
Simple and safety HTML/SVG cleaner to minify without changing its structure.
See [htmlclean](https://github.com/anseki/htmlclean) for options and more information about htmlclean.
## Installation
```
npm install --save-dev htmlclean-loader htmlclean
```
## Usage
Documentation:
- [Loaders](https://webpack.js.org/concepts/loaders/)
- [Using loaders](http://webpack.github.io/docs/using-loaders.html) (for webpack v1)
For example:
```js
// app.js
var headerHtml = require('./header.html');
document.getElementById('header').innerHTML = headerHtml;
```
```js
// 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:
```js
// 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](https://github.com/anseki/htmlclean#options) 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:
```js
// 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.
}
};
```
```js
// 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.