npm install --save-dev webpack-module-nomodule-plugin

or

yarn add -D webpack-module-nomodule-plugin

This automates the generation of module-nomodule scripts.

This project relies on html-webpack-plugin.

module-nomodule explained.

The only thing you need to do is return two build steps in your webpack and forward this to this plugin like this:

• for legacy new WebpackModuleNomodulePlugin('legacy');
• for modern new WebpackModuleNomodulePlugin('modern');

The rest will be handled for you!

The second argument to WebpackModuleNomodulePlugin allows you to specify an output mode.

At this point there are two:

• efficient (default)
• minimal

These are exported as an object containing OUTPUT_MODES.

Ensures IE11 and some Edge versions won't double download the contents of your scripts. This adds some more size to your html file and defers the loading of scripts.

This will look something like this:

What happens in this picture?

• We declare the modern javascript files as modulepreload to shave a bit off the load/parse time of these
• We dynamically inject the entry-modules with the bigger script to avoid injecting needlessly

Makes the most minimal output possible, this will be downloaded twice on older Edge and IE11.

This will look something like this:

The script in the middle between type="module" and nomodule is meant for safari 11 compat.

nomodule will load for browsers who don't support module and the other way around, the problem with this approach is we'll be downloading both bundles on certain Edge versions and IE11.

https://github.com/JoviDeCroock/POC-ModularLegacyBuild

This example uses multiple techniques to guarantee the best size, like using native-url in modern browsers, ...