DEV Community

bairrada97
bairrada97

Posted on

FrontEnd Workflow help

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.

Discussion (7)

Collapse
shiftyp profile image
Ryan Lynch (he/him)

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 in header.js? What is your expectation about how these come together in a webpage?

Collapse
bairrada97 profile image
bairrada97 Author

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.

Collapse
shiftyp profile image
Ryan Lynch (he/him) • Edited on

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.

Collapse
joerter profile image
John Oerter

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.

Collapse
bairrada97 profile image
bairrada97 Author

maybe I can try Parcel, just try to build my own boilerplate without using gulp

Collapse
joerter profile image
John Oerter

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?

Thread Thread
bairrada97 profile image
bairrada97 Author

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 :)