optimize webpack config for faster build website

[webdiscus]

• switch to modern html-bundler-webpack-plugin
• replace deprecated file-loader and url-loader with Webpack 5 assets module
• create single webpack config instead of two configs

[webdiscus]

Hello,

I'm the author of the html-bundler-webpack-plugin. I want to improve site compilation performance.

The optimisation do faster the command npm run start:website:

• before: 4.9 sec
• after: 2.7 sec

measured on MBP M1 Max.

Notes:

I have optimised the Webpack config using the html-bundler-webpack-plugin. This plugin replaces functionality of:

• html-webpack-plugin
• mini-css-extract-plugin
• html-loader
• style-loader
• handlebars-loader

Using the html-bundler-webpack-plugin:

• An entry point is an HTML template.
• Source scripts and styles can be specified directly in HTML using <script> and <link> tags.

The plugin resolves references in the HTML template and replaces them with output filenames in the generated HTML. The plugin support various templating engines, including the Handlebars, "out of the box".

Before merging, please try my fork to see how it works:

git clone https://github.com/webdiscus/diff2html.git
cd diff2html
git switch html-bundler-webpack-plugin
yarn
npm run build
npm run start:website

See please my comments in PR.

P.S.

The plugin is yet not popular, but it make a huge developer experience improvement and is much faster and better than the html-webpack-plugin. You can ignore and close this PR, "Sorry to Bother You".

[rtfpessoa]

The plugin is yet not popular, but it make a huge developer experience improvement and is much faster and better than the html-webpack-plugin. You can ignore and close this PR, "Sorry to Bother You".

I have been thinking about this PR for a while, but TBH I am in the fence to accept it. My main concern is that it eventually dies and I have to migrate back.

I will think a bit more about it and make a decision in the next week or so.

[webdiscus]

My main concern is that it eventually dies and I have to migrate back.

The same can be said about absolutely any young repo. The html-webpack-plugin is very very old and no longer developed, issues are fixed very rarely, the reaction to the issuer can take years. Old things are not always good and reliable.

The html-bundler-webpack-plugin has been developing for almost 2 years (only 9 months ago I made it public).

I'm a web developer and made this plugin (used in production by many projects) for myself to make my life easier because using html-webpack-plugin was causing me pain, especially with a multi-page configuration.

P.S. In any case, thanks for your attention. I have no intention of forcing people to use my plugin, not at all. I just wanted to demonstrate how much easier it is to create HTML pages using a new plugin.