How to handle Multiple Webpack Builds based on differant ES Version?

Question

tl;dr

How to export different versions of my script main.js as main-es-2017.js and main-es5.js and include both these files in my HTML?

The Long version of the question:

when we transpile files into ES5 there is some unnecessary code is added which is not required for the modern browsers hence I wanted to export multiple versions of my script one for the old browsers and one for new browsers.

I understand that we can simply load different files with a simple nomodule attribute but how to handle that with the Webpack.

I am using the HTMLWebpack plugin to create HTML and I am using HTML No Module plugin for adding No Module attribute.

Reference Link: https://philipwalton.com/articles/deploying-es2015-code-in-production-today/

Thanks in advance!!!

Answer 1

After wracking my brain around the web, I could not find an answer so I had to implement a custom solution that I would not recommend so before going for a custom solution there is a third party addon named "HTMLWebpackTagsPlugin" for adding assets to your generated HTML, you can add CSS of JS files to your HTML file after the build is successful.

Although this was not a solution for me since the build was running multiple times which was overriding the generated HTML.

My solution: I created an addon for the Webpack HTML Plugin which notes down the build file path and then I created a custom script that runs after the build is successful and injects the build scripts into the HTML.

I will try to create an open-source code template that will be easy for everyone to understand.