Skip to content

SzHeJason/html-webpack-polyfill-runtime-plugin

Repository files navigation

HTML Webpack Polyfill Runtime Plugin

A HTML Webpack Plugin for auto injecting runtime polyfill script

This plugin make to you forget js polyfill

Install

# npm
npm install html-webpack-polyfill-runtime-plugin --save-dev
# yarn
yarn add html-webpack-polyfill-runtime-plugin -D

Example

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlPolyfillRuntimePlugin = require('html-webpack-polyfill-runtime-plugin');

module.exports = {
  entry: "./app.js",
  mode: "production",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', {
              targets: [
                'defaults',
                'Chrome > 33',
                'ios_saf > 7',
                'android > 4.4',
              ],
            }]]
          }
        }
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin(), new HtmlPolyfillRuntimePlugin()],
}

output html

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Webpack App</title>
  <script
    src="https://polyfill.io/v3/polyfill.min.js?features=console,Function.prototype.bind,Map,Object.create,Object.defineProperty,Set,Symbol,Symbol.toStringTag"></script>
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body>
  <script src="main.js"></script>
</body>

</html>

Process

image

Build private runtime polyfill service

The plugin use polyfill.io by deafult,but you can makeprivate runtime polyfill service by js-polyfill-docker and override plugin url

// webpack.config.js
const HtmlPolyfillRuntimePlugin = require('html-webpack-polyfill-runtime-plugin')

module.exports = function() {
	...,
	plugins:[
		...
    // position of the plugin is last
		new HtmlPolyfillRuntimePlugin({
			url(features){
				return `https//yourpolyfill.service.com/pathname?features=${features.join(,)}`
			}
		})
	]
	...,
}

About

A HTML Webpack Plugin for auto injecting runtime polyfill script

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published