Hello,
I'm building my own boilerplate using webpack.
I would like to know how to structure a project with html components, for example I want to build a page, where Header and footer are different components.
For that I want to create a folder called Components inside that I'll have another folder called Header and another called Footer, inside each folder I'll have 3 files, header.html, header.js and header.scss.
On my root I have and Index.html, how can I, using webpack, load this 2 components inside index.html, without copying paste the html?
Everything I searched on web about that says that I have to use javascript to create my html and with a webpack plugin importing inside index.html.
Top comments (7)
How do these components (Header and Footer) render into a single page? Tools like webpack are usually one of a few tools you end up using to bring components together into a page, and there are many possible answers here depending on what your code is. What markup is in
header.html, and what functionality is inheader.js? What is your expectation about how these come together in a webpage?Imagine just a empty header tag, that I want to render on index.html, but I want to have a file for that, that's my header.html.
Right now I can have a lot of .js files that will compile in a bundle, and for Scss too, but I cant to that with html.
I just want to work with modules and components and I'm looking for a way to put them together in pages with webpack.
HTML, by itself, isn't composable in that way. Components are usually built in Javascript or something you can turn into Javascript. This is because in order to render they need access to the DOM to change the page dynamically. They also usually require some additional framework code to run, otherwise they would be more complicated individually. There are some divergent directions I could recommend, but I'd want to know what you think of the above first.
Are you set on using webpack? Although I'm sure you can do this with webpack, it doesn't seem like webpack's bread and butter. You might look at some html templating libraries like Pug, or write your own scripts to do exactly what you want.
maybe I can try Parcel, just try to build my own boilerplate without using gulp
I used Gulp a lot in the past and used it again in a project recently. It's still great. Any reason you don't want to use it?
No specific reason, just want to try new things, since my actual company use gulp, I want to try webpack or parcel to my own projects :)