@@ -13,49 +13,48 @@ The Idea is to create two bundles, one modern es6+ bundle and one legacy es5 bun
1313The Solution is to provide two script tags, one with type=module (es6+ code) and one with "nomodule" (es5 code).
1414Modern Browser will now only load the script tag with type=module while legacy browser only load the script tag with "nomodule".
1515
16+ ### Why do i need this addon?
17+ This plugin for html-webpack-plugin generates script tags for module and nomodule for a webpack multi build configuration.
18+ 1619### Will some Browser still download both bundles?
1720
18- Yeah some Browser like Safari, IE11, Edge are downloading both bundles, but only executing one.
21+ Yeah some browser like Safari, IE11, Edge are downloading both bundles, but only executing one.
1922
2023We have integrated a clever fix for this.
2124
2225We creating a script tag with module / nomodule and in this script tags we are dynamically adding the script tags for the actual javascript resources.
2326
2427```
25- <script type="module">
26- var script = document.createElement('script');
27- script.type = 'text/javascript';
28- script.src = 'vendors~app_60d33517957366ff05a8.js';
29- document.body.appendChild(script);
30- </script>
28+ <script type="module">
29+ var script = document.createElement('script');
30+ script.type = 'text/javascript';
31+ script.src = 'vendors~app_60d33517957366ff05a8.js';
32+ document.body.appendChild(script);
33+ </script>
3134```
3235
33- ### Why do i need this addon?
34- This plugin for html-webpack-plugin (together with its html-template) generates script tags for module and nomodule for a webpack multi build configuration.
35- 36- ### Read about webpack Multi Build Configuration
36+ ### Read about webpack multi build configuration
3737https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations
3838
3939### How to use this addon?
4040
41- You should only use this addon for multi-builds, not for development. .
41+ You should only use this addon for multi-builds.
4242
43- #### Example Usage:
4443```
45- // package.json
44+ // PACKAGE.JSON
4645 "scripts": {
4746 build:multi": "webpack --env.build=multi"
4847 }
4948
5049 .....
51-
52- // legacy webpack config filename need's to include 'legacy'
50+ // WEBPACK CONFIG
51+ // Legacy webpack config filename need's to include 'legacy'
5352 config.output.filename = '[name]_legacy.js';
5453
55- // modern webpack config filename
54+ // Modern webpack config filename should not include 'legacy'
5655 config.output.filename = '[name].js';
5756
58- // both webpack configs (legacy and modern ) should include
57+ // both webpack configs (Legacy and Modern ) should include htmlWebpackPlugin and htmlWebpackMultiBuildPlugin
5958
6059 const htmlWebpackMultiBuildPlugin = require('html-webpack-multi-build-plugin');
6160 const multiBuildMode = process.env.build === 'multi'
@@ -64,14 +63,9 @@ You should only use this addon for multi-builds, not for development..
6463 new htmlWebpackPlugin({
6564 inject: !multiBuildMode,
6665 template: multiBuildMode ? require.resolve('html-webpack-multi-build-plugin/template.ejs');, // or copy and modify
67- })
66+ }),
67+ new htmlWebpackMultiBuildPlugin()
6868 ]
69-
70- if(multiBuildMode) {
71- base.plugins.push(
72- new htmlWebpackMultiBuildPlugin()
73- )
74- }
7569```
7670
7771
0 commit comments