html2js-loader
Exports HTML to javascript instructions. Create javascript functions from HTML templates.
Install
npm i -D html2js-loader
Usage
Add 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 --> Item one Item two Item three
const createList = ; documentbody;
this will be converted to the following javascript:
{ var e_0 = document; e_0; var e_1 = document; e_1; e_0; var e_2 = document; e_2; e_0; var e_3 = document; e_3; e_0; 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:
moduleexports = { return document; } { return document; } { return document; } { parent; } { elem; };
This will enable the compiler to name mangle these function calls. For example if we convert the following html:
Item one Item two Item three
That will produce the following minified base code (this will only be included once):
var {return document}{return document}{return e}{return e}
And the following minified javascript instructions for the html template:
var e=;;var f=;;;f=;;;f=;;;