CODEWITHSUNDEEP
webpack
Andrew Bullock
Andrew Bullock

Reputation: 37398

Webpack + HTMLWebpackPlugin for multiple HTML files

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.

Upvotes: 0

Views: 531

Answers (1)

Sam Chen
Sam Chen

Reputation: 2148

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.

Upvotes: 1

Related Questions