0

If my entire approach is wrong or can be alternatively improved, please advise. I don't really care about the means to the end, just that I can work in the way I desire.

I'm building a static web app which has multiple pages. During development I'm rapidly adding new pages, and this is causing me grief. I'm effectively doing this: https://dev.to/mariorodeghiero/multiple-html-files-with-htmlwebpackplugin-19bf which seems to be recommended by multiple people as the way to use HtmlWebpackPlugin for multiple files.

I don't have a static list, I'm using fs to glob all the *.htmls and build my plugin array for me.

That works great, but every time I add a new file I have to restart my dev toolchain in order to reconfigure webpack with the new file/plugin instance. This is inconvenient.

I know I can use fs.watch to reboot webpack/rerun the config for me when I detect a new file, but this stinks even more. Surely this can't be the way to do this?

How do I have a dev environment with webpack where I can add .html files and have the new files automatically detected by webpack and processed as normal.

Improve this question
0

1 Answer 1

Reset to default
1

I think I have a similar situation when developing my own framework. Here's what I have done:

  1. set up a development server with express and webpack-dev-middleware
  2. apply HtmlWebpackPlugin only when a request comes in, this should add a new html page to webpack's assets (don't use html-webpack-plugin@next, as it doesn't support lazy apply https://github.com/jantimon/html-webpack-plugin/issues/1527#issuecomment-747447801)
  3. invalidate webpack compilation with webpack-dev-middleware https://github.com/webpack/webpack-dev-middleware#invalidate, it will delay the response until webpack finish the compilation which means the requested html page will be served when it's ready

Since I'm compiling the html page on-demand now, there's no need to restart the dev server, and sure it will make webpack faster as it doesn't have to compile all the pages at once.

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.