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.
html-webpack-plugin
with the inject: 'body'
option set.new WebpackModuleNomodulePlugin('legacy');
or 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:
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?
modulepreload
to shave a bit off the load/parse time of theseMakes 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, ...