CODEWITHSUNDEEP
javascripthtmlcsswebpackhtml-webpack-plugin
jdstaerk
jdstaerk

Reputation: 892

Webpack project with mutliple html / js / css files

I think that I've got how Webpack works. My problem is: Most tutorials/examples are based on a single index.html. So, how would I organize my webpack.config.js and directory structure for multiple pages?

Let's assume that I need the following things:

  1. index.html with a css and js file
  2. dashboard.html with a css and js file
  3. profile.html with a css and js file

And here is what I don't get:

  1. How would you structure your src and dist folder?
  2. How do I have to configure Webpack? Probably with HtmlWebpackPlugin(?)
  3. Is a single index.js file enough as entry point / How does one structure the index.js file / How do ES6 projects look in general?

A sample project would help a lot. A project with more than just an example index.html file.

Have a good day! :)

Upvotes: 3

Views: 208

Answers (2)

andrew s zachary
andrew s zachary

Reputation: 167

I think u can do that by convert html+js+css into web component and u can do that easily by a framework , i think Vue js give very good boilerplate full Webpack template to let u do that just start to think about the other page as a new component remember that u r using webpack to get a bundle

Upvotes: 1

Chris Hawkes
Chris Hawkes

Reputation: 12420

So you can have one watch output multiple bundle types by passing in a command line arg to build the right bundle. There can be multiple entry points in webpack but webpack is only build to output one bundle. So, to solve this issue I figured passing a command line arg to webpack is a clean way of having multiple bundle possibilities while maintaining only one config file.

To see how this can be accomplished checkout...

https://www.hipstercode.com/blog/27/

Upvotes: 0

Related Questions