|
1 | 1 | # html-webpack-multi-build-plugin |
2 | 2 |
|
3 | | -tbd |
| 3 | +This plugin simplifies the creation of HTML files for multi build configuration. |
| 4 | + |
| 5 | +### Why do you want to do this? |
| 6 | + |
| 7 | +Most developers still transpile their code to ES5 and bundle it with polyfills to provide support for older browsers. |
| 8 | +But for newer browsers this transpiled code is unnecessary and probably slower then ES6+ code. |
| 9 | +The Idea is to create two bundles, one modern es6+ bundle and one legacy es6 bundle. |
| 10 | +The Solution is to provide two script tags, one with type=module (es6+ code) and one with "nomodule" (es5 code). |
| 11 | +Modern Browser will now only load the script tag with type=module while legacy browser only load the script tag with "nomodule". |
| 12 | + |
| 13 | +### Why do i need this addon? |
| 14 | +This plugin for html-webpack-plugin (together with its html-template) generates script tags for module and nomodule for a webpack multi build configuration. |
| 15 | + |
| 16 | +### Read about webpack Multi Build Configuration |
| 17 | +https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations |
| 18 | + |
| 19 | +### How to use this addon? |
| 20 | + |
| 21 | +You should only use this addon for multi-builds, not for development.. |
| 22 | + |
| 23 | + |
| 24 | +example usage: |
| 25 | +``` |
| 26 | + "scripts": { |
| 27 | + build:multi": "webpack --env.build=multi" |
| 28 | + } |
| 29 | + |
| 30 | + ..... |
| 31 | + |
| 32 | + const htmlWebpackMultiBuildPlugin = require('html-webpack-multi-build-plugin'); |
| 33 | + const multiBuildMode = process.env.build === 'multi' |
| 34 | + |
| 35 | + base.plugins: [ |
| 36 | + new htmlWebpackPlugin({ |
| 37 | + inject: !multiBuildMode, |
| 38 | + template: multiBuildMode ? require.resolve('html-webpack-multi-build-plugin/template.ejs');, // or copy and modify |
| 39 | + }) |
| 40 | + ] |
| 41 | + |
| 42 | + if(multiBuildMode) { |
| 43 | + base.plugins.push( |
| 44 | + new htmlWebpackMultiBuildPlugin() |
| 45 | + ) |
| 46 | + } |
| 47 | +``` |
| 48 | + |
| 49 | + |
| 50 | +### Sources |
| 51 | +https://github.com/jantimon/html-webpack-plugin/issues/782 |
| 52 | +https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ |
| 53 | +https://github.com/philipwalton/webpack-esnext-boilerplate |
| 54 | +https://jakearchibald.com/2017/es-modules-in-browsers/ |
0 commit comments