Exports HTML to javascript instructions. Create javascript functions from HTML templates.
npm i -D html2js-loaderAdd the html2js-loader to your webpack.config.js.
{
test: /\.html$/,
use: {
loader: 'html2js-loader',
options: {}
}
}Now, simply import/require any html. For example:
<!-- templates/list.html -->
<ul role="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>const createList = require('./templates/list.html');
document.body.appendChild(createList());this will be converted to the following javascript:
function createNode() {
var e_0 = document.createElement("ul");
e_0.setAttribute("role", "list");
var e_1 = document.createElement("li");
e_1.appendChild(document.createTextNode("Item one"));
e_0.appendChild(e_1);
var e_2 = document.createElement("li");
e_2.appendChild(document.createTextNode("Item two"));
e_0.appendChild(e_2);
var e_3 = document.createElement("li");
e_3.appendChild(document.createTextNode("Item three"));
e_0.appendChild(e_3);
return e_0;
}You can use this online tool: html2js.esstudio.site which will convert your html to javascript on the fly.
The loader will optimize this code by injecting the following base code into your bundle:
module.exports = {
document_createDocumentFragment: () => {
return document.createDocumentFragment();
},
document_createElement: name => {
return document.createElement(name);
},
document_createTextNode: text => {
return document.createTextNode(text);
},
appendChild: (parent, child) => {
parent.appendChild(child);
},
setAttribute: (elem, key, value) => {
elem.setAttribute(key, value);
}
};This will enable the compiler to name mangle these function calls. For example if we convert the following html:
<ul role="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>That will produce the following minified base code (this will only be included once):
var a=function(e){return document.createElement(e)},b=function(e){return document.createTextNode(e)},c=function(e,f,g){return e.setAttribute(f,g)},d=function(e,f){return e.appendChild(f)}And the following minified javascript instructions for the html template:
var e=a("ul");c(e,"role","list");var f=a("li");d(f,b("Item one"));d(e,f);f=a("li");d(f,b("Item two"));d(e,f);f=a("li");d(f,b("Item three"));d(e,f);Make sure the dev dependencies are installed and run:
npm test
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent