@lucsoft/minify-lit-html-loader
v0.0.4
Published
A webpack loader to minify lit-html strings
Downloads
9
Maintainers
Readme
npm install minify-lit-html-loader
Within your webpack configuration object, you'll need to add the minify-lit-html-loader to the list of modules, like so:
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'minify-lit-html-loader'
}
}
]
}
Or if you are using Typescript, chain it after your Typescipt loader, like so:
module: {
rules: [
{
test: /\.ts?$/,
exclude: /node_modules/,
use: [
{
loader: 'minify-lit-html-loader',
},
{
loader: 'ts-loader'
},
]
}
]
}
Options for the esprima
parser are:
interface Config {
range: boolean;
loc: boolean;
source: string | null;
tokens: boolean;
comment: boolean;
tolerant: boolean;
sourceType: 'module' | 'script';
}
range
and loc
will always be set to true as these are required for the operation of the loader.
Options for html-minifier
can be found here
You can pass options to the loader by using the options property:
module: {
rules: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: 'minify-lit-html-loader',
options: {
esprima: {
loc: true,
},
htmlMinifier: {
customAttrCollapse: /events/,
}
}
},
],
}
]
},
The default options for html-minifier
are:
htmlMinifier: {
caseSensitive: true,
collapseWhitespace: true,
minifyCSS: true,
preventAttributesEscaping: true,
removeComments: true
}
Recommended Options
The arguments below for ignoring custom fragments are recommended because without them, the minifier will have a parsing error if it encounters any less-than (<
) or less-than-or-equal-to (<=
) operators in your lit-html string.
{
loader: 'minify-lit-html-loader',
options: {
htmlMinifier: {
ignoreCustomFragments: [
/<\s/,
/<=/
]
}
}
},
There are currently no automated tests written for the loader and it has only been tested in a very limited way. It will be something I will be working on soon but I do welcome PRs from anyone willing to contribute to this project.