3

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

Improve this question

2 Answers 2

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

That means, that every line of code is loaded into every *.html file? Wouldn't that be stupid? Loading loads of unused js into a light just-text.html file? :)
well Vue js fixed that problem, imagine that u have a photo gallery with it's js+css+html and of course the js lib to make them work , Vue will only init the gallery when u load it as a component as new page then u can kill the gallery and delete it from memory if it has decent API so it is about init and kill to have better loads of js
0

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/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.