Minify Template Literal Loader
What this loader does
This loader takes
.js template files and minifies them with
// converts this:`<div>Awesome Template</div>`;// to this:`<div>Awesome Template</div>`;
Although webpack can be extremely powerful, it does some unconventional things to get results - like importing html...
// let's face it, this is weird;
Reasons to use template literals as templates:
Don't get stuck in webpack! All this loader does is minify html.
Interpolate as needed:;`<div></div>`;
You can tag your template literals to add some extra processing on the client side:`<div>template</div>`
$ npm install -D minify-template-literal-loader html-minifier
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:
configmodulerules =test: /\.js$/loader: 'babel-loader'test: /\.template\.js$/loader: 'minify-template-literal-loader'options:caseSensitive: truecollapseWhitespace: true
The options object is a pass-through to the
html-minifier options. Go to html-minifier's github page to learn more.