Webpack Index HTML Plugin
Webpack plugin to make webpack understand your index.html.
- Takes in a standard index.html:
My appHello world!
<script type="module" src="...">and feeds them to webpack as entry point(s)
Outputs the same index.html with updated file hashes and all inline HTML, CSS and JS minified:
My appHello world!
- Optionally adds a loader script for conditionally loading polyfills and/or a separate build for older browsers.
Note that only module scripts with a
src attribute are used as entrypoints, regular scripts and inline modules are minified but not parsed by webpack.
To use this plugin, add it to your webpack configuration and set your index.html as entrypoint:
const path = ;const WebpackIndexHTMLPlugin = ;moduleexports =entry: pathoutput:filename: '[name].[chunkhash].js'chunkFilename: '[name].[chunkhash].js'plugins:;
Note when using
@open-wc/building-webpackpolyfills are already configured for you.
Depending on which browser you need to support you may need to polyfill certain browser features. To keep your bundles small, we don't serve any polyfills by default. You can enable polyfills in the configuration.
When enabling polyfills a small loader script is injected to your index.html. Polyfills are loaded based on feature detection. This causes a small delay in loading your app. We mediate this by adding a preload link during the build.
To enable polyfills:
polyfills:hashPolyfills: truecoreJs: trueregeneratorRuntime: truewebcomponents: truefetch: trueintersectionObserver: true;
core-js polyfills many language features such as
regeneratorRuntime is necessary when you compile
The rest of the polyfills target specific browser features, see their documentation for more info:
If you need a polyfill which is not on this list, consider creating an issue so that we can add it. You can also specify custom polyfills:
polyfills:coreJs: truecustomPolyfills:// the name of your polyfillname: 'my-feature'// expression which is run in the browser to determine if the polyfill should be loadedtest: "'myFeature' in window"// path to your polyfillpath: require// path to the sourcemaps of your polyfill. optionalsourcemapPath: requireYou can disable the content hash in the distributed polyfill filenames by setting `polyfillsHash` to `false`
Multi (legacy and modern) build
Note when using
@open-wc/building-webpack/modern-and-legacy-configthe multi build is already configured for you
If you need to support non-modern browsers, such IE11 or older versions of chrome, safari and firefox, it's better to create multiple builds of your app.
To create multiple webpack builds, export an array of webpack configs instead of a single config. Set the
multiBuild option in both instances of the plugin and set
legacy option in the legacy build:
const path = ;const WebpackIndexHTMLPlugin = ;moduleexports =entry: pathplugins:multiBuild: truepolyfills:coreJs: trueregeneratorRuntime: truewebcomponents: trueentry: pathmodule:rules:// Note: You will probably also want to configure babel for the legacy build.// this is not a complete example, you will need to add more configuration for babeltest: /\.js/ use: loader: 'babel-loader'plugins:multiBuild: truelegacy: true;
For the legacy build you do not need to configure any polyfills, as these are already injected by the modern build.
You will probably need to use babel as well to transpile your code to ES5. Remember to change the browser targets for the modern and legacy build accordingly. For example latest 2 of the major browsers for modern and IE11 for the legac build.
We use html-minifier for minifcation with a default configuration. You can adjust this configuration by passing a minify object:
minify:// minify options;
The options object is passed as is to
html-minifier. See the documentation of html-minifier for all possible minification options.
It is also possible to turn off minification completely by passing minify:
Non index.html entrypoints
You can use this plugin without an index.html plugin if you still want to make use of the polyfilling features. You can do this by adding a custom template function:
const path = ;const WebpackIndexHTMLPlugin = ;moduleexports =entry: pathoutput:filename: '[name].[chunkhash].js'chunkFilename: '[name].[chunkhash].js'plugins:`<html><head></head><body></body></html>`;
When loading polyfills we inject a small script in your index.html. If you need CSP you can separate the script in a separate file:
const path = ;const WebpackIndexHTMLPlugin = ;moduleexports =entry: pathoutput:filename: '[name].[chunkhash].js'chunkFilename: '[name].[chunkhash].js'plugins:polyfills:webcomponents: trueloader: 'external';
The template function receives the project's
entries. If applicable it also receives the