HtmlWebpackPolyfillIOPlugin

Use the Financial Times' polyfill.io service in your webpack builds with the help of the HtmlWebpackPlugin.

Installation

Install the plugin with npm:

$ npm install --save-dev html-webpack-polyfill-io-plugin

Install the pluging with yarn:

yarn add --dev html-webpack-polyfill-io-plugin

Usage

Add the plugin to your webpack configuration.

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackPolyfillIOPlugin = require('html-webpack-polyfill-io-plugin')

module.exports = {
  /* ... */
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackPolyfillIOPlugin(),
  ]
}

Configuration

The plugin's configuration mirrors that listed at polyfill.io/v2/docs/api when possible. Documentation here is minimal to avoid duplicating the official documentation.

(minify: boolean)

default: true when NODE_ENV === 'production', false otherwise.

(features: string|Array<string>)

Features to include.

May be a string defining a comma separated list of features or an array of features.

excludes

Features to exclude from output.

May be a string defining a comma separated list of features or an array of features.

(flags: 'always'|'gated')

default: not set

If set, specifies whether features listed in features should be gated or always included.

(callback: string)

A function to be called once the polyfill has been loaded successfully.

Must be a valid javascript identifier.

(unknown: 'ignore'|'polyfill')

What to do when the user agent is not recognized.

(rum: boolean)

Explicitly enable or diable real user monitoring

Example

new HtmlWebpackPolyfillIOPlugin({
  minify: true, // Always minify, even in dev
  features: [
    'Intl',
    'Map',
    'Set',
    'Array.isArray',
    'Array.prototype.find',
    'Array.prototype.some',
    'Object.assign',
    'Promise',
  ], // Features to include
  flags: 'always', // Include all specified features regardless of user-agent
  unknown: 'polyfill', // Polyfill all listed features if user-agent is unkown
  callback: 'polyfillHasLoaded',
  rum: true, // Allow real-user monitoring
})