Menu
I spent hours on a basic webpack configuration but I'm still not able to make it work. My aim is to perform the parsing of a html template as you import it in a JavaScript file. It looks like a common use-case, but there should be something odd in my webpack configuration or in my understanding.
I looked for configurations of html-loader, html-webpack-plugin, posthtml as well as pug and I've read all of their documentations, but none of them worked.
According to PostHTML Readme:
PostHTML is a tool for transforming HTML/XML with JS plugins. PostHTML itself is very small. It includes only a HTML parser, a HTML node tree API and a node tree stringifier.
So, since it was the most promising, I report my attempt with posthtml:
rules: [
{
test: /.html$/,
use: [
{
loader: "html-loader",
options: {
minimize: true,
interpolation: false
}
},
{
loader: "posthtml-loader"
}
]
}
]
It doesn't return any error but it looks like is totally ignoring the posthtml-loader, since executing import template from 'src/test.html' I get the template as string (how is supposed to do html-loader alone).
In my understanding, loaders are supposed to compile/transform files with different formats and make them available to JavaScript, and since html is the most common type in a front-end project I supposed it was easy, but I'm not finding anything on the internet related to this question.
What I expect is to have a DOM tree object or, anyway, something that can be used by JavaScript.
Is anyone able to help me?
EDIT: My question is about getting a webpack configuration up and working. I know many solution for parsing HTML strings, but they're not applicable here
792
Well, transforming a string to html is easy. So if you get a string reposonse back for your template you can transform it to a DOM structure like below.
/** Create a NON attached DOM element. This floats in nothing. Hello Dave */
var dave = document.createElement("div");
/** Give dave a body with the HTML string we received from "somewhere" */
dave.innerHTML = "<div class='foo'><input type='text'></div>";
/**
* dave is now <div><div class='foo'><input type='text'></div></div>
*/
dave.querySelector('input').value = "I'm sorry Dave, I'm afraid I can't do that";
/** ======================================================================
* Now render we render Dave, this isn't really needed, but will do anyways.
* We don't need the "wrapping" floating div we created so we get all of Dave's children
* And let Dave be forgotten about in the abyss of eternity.
*/
var content = dave.children;
var main = document.getElementById('main');
for(var i = 0; i < content.length; i++) {
main.appendChild(content[i]);
}.foo {
background-color: red;
}
.foo input {
background-color: black;
color: white;
}<body id="main">
</body>You can then do transformation on the 'children' as well, just as you would with a normal DOM tree object.
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
