script-attr-html-webpack-plugin

Script Extension for HTML Webpack Plugin

Inspired by script-ext-html-webpack-plugin

The raw html-webpack-plugin incorporates all webpack-generated javascipt as synchronous<script> elements in the generated html. This plugin allows you to:

• add attributes to these elements;

Installation

You must be running webpack (1.x or 2.x) )on node 4+.

Install the plugin with npm:

$ npm install --save-dev script-attr-html-webpack-plugin

Basic Usage

Add the plugin to your webpack config as follows:

All scripts set crossOrigin:

plugins: [
  new HtmlWebpackPlugin(),
  new ScriptAttrHtmlWebpackPlugin({
    attributes: {
      crossorigin: 'use-credentials'
    }
  })
]

Configuration

You must pass a hash of configuration options to the plugin to cause the addition of attributes:

• chunks: a script matching pattern defining scripts that should be inlined in the html (default: [/*/]);
• attributes: an object to set attributes to script tag (default: {});

A script matching pattern matches against a script's name. It can be one of:

• a String- matches if it is a substring of the script name;
• a RegExp;
• an array of String's and/or RegExp's - matches if any one element matches;

A Note on Script Names

Your webpack.config.js will look something like this:

entry: {
  a: path.join(__dirname, 'lib/a.js'),
  b: path.join(__dirname, 'lib/b.js'),
  c: path.join(__dirname, 'lib/c.js')
},
output: {
  ...
  filename: '[name].js'
}
plugins: [
  new HtmlWebpackPlugin(),
  new ScriptAttrHtmlWebpackPlugin({
    chunks: ['c'],
    attributes: {
          crossorigin: 'use-credentials'
    }
  })
]

New attributes will set to <script src="c.js">