@@ -8,21 +8,15 @@ Most developers still transpile their code to ES5 and bundle it with polyfills t
88But for newer browsers this transpiled code is unnecessary and probably slower then ES6+ code.
99The Idea is to create two bundles, one modern es6+ bundle and one legacy es5 bundle.
1010
11- 1211### What? How do you do that?
13- The Solution is to provide two script tags, one with type=module (es6+ code) and one with "nomodule" (es5 code).
12+ The solution is to provide two script tags, one with type=module (es6+ code) and one with "nomodule" (es5 code).
1413Modern Browser will now only load the script tag with type=module while legacy browser only load the script tag with "nomodule".
1514
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- 1915### Will some browser still download both bundles?
2016
21- Yeah some browser like Safari, IE11, Edge are downloading both bundles, but only executing one.
22- 23- We have integrated a clever fix for this.
24- 25- We creating a script tag with module / nomodule and in this script tags we are dynamically adding the script tags for the actual javascript resources.
17+ Some browser like Safari, IE11, Edge are downloading both bundles, but only executing one.
18+ This plugin has integrated a clever fix for this.
19+ By creating a script tag with module / nomodule which dynamically injects the actual script tags for the javascript resources.
2620
2721```
2822<script type="module">
@@ -33,19 +27,31 @@ We creating a script tag with module / nomodule and in this script tags we are d
3327</script>
3428```
3529
30+ ### Why do i need this addon?
31+ This plugin for html-webpack-plugin generates script tags for module and nomodule for a webpack multi build configuration.
32+ 33+ ### Async CSS Loading
34+ The included template add's tags for async (non blocking) css
35+ ```
36+ <link href="app.css" rel="stylesheet" media="nope!" onload="this.media='all'">
37+ ```
38+ 3639### Read about webpack multi build configuration
3740https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations
3841
3942### How to use this addon?
40- You should only use this addon for multi-builds.
4143
44+ Check out my [ Example Project] ( https://github.com/firsttris/html-webpack-multi-build-plugin/tree/master/example )
45+ 46+ Summarized
4247
4348#### Package.json
4449```
4550 "scripts": {
4651 build:multi": "webpack --env.build=multi"
4752 }
48- ```
53+ ```
54+ 4955#### webpack.config
5056```
5157 // Legacy webpack config needs to include 'legacy'
@@ -59,7 +65,9 @@ You should only use this addon for multi-builds.
5965 const htmlWebpackMultiBuildPlugin = require('html-webpack-multi-build-plugin');
6066 const multiBuildMode = process.env.build === 'multi'
6167
62- const template = multiBuildMode ? require.resolve('html-webpack-multi-build-plugin/template.ejs') : require.resolve('html-webpack-plugin/default_index.ejs');
68+ const template = multiBuildMode
69+ ? require.resolve('html-webpack-multi-build-plugin/template.ejs')
70+ : require.resolve('html-webpack-plugin/default_index.ejs');
6371
6472 config.plugins: [
6573 new htmlWebpackPlugin(
0 commit comments