template-string-optimize-loader
template string optimize loader module for webpack
Installation
npm i template-string-optimize-loader -D
Usage
module: {
rules: [
{
test: /\.js$/,
use: [
'template-string-optimize-loader',
'babel-loader'
]
}
]
}Example
// ES6 template string HTML
const template = data => `
<!-- section start -->
<section>
<h3>${data.title}</h3>
<div>${data.date}</div>
<dl>
<dt>Coffee</dt>
<dt>Black hot drink</dt>
<dt>Milk</dt>
<dd>
<ul>
${data.list.map((item) => `
<li>${item}</li>
`).join('')}
</ul>
</dd>
</dl>
</section>
<!-- section end -->
`;// source => babel
var template = function template(data) {
return '\n <!-- section start -->\n <section>\n <h3>' + data.title + '</h3>\n <div>' + data.date + '</div>\n <dl>\n <dt>Coffee</dt>\n <dt>Black hot drink</dt>\n <dt>Milk</dt>\n <dd>\n <ul>\n ' + data.list.map(function (item) {
return '\n <li>' + item + '</li>\n ';
}).join('') + '\n </ul>\n </dd>\n </dl>\n </section>\n <!-- section end -->\n';
};// source => babel => template-string-optimize
var template = function template(data) {
return '<section><h3>' + data.title + '</h3><div>' + data.date + '</div><dl><dt>Coffee</dt><dt>Black hot drink</dt><dt>Milk</dt><dd><ul>' + data.list.map(function (item) {
return '<li>' + item + '</li>';
}).join('') + '</ul></dd></dl></section>';
};