rjmackay / link-rel-html-webpack-plugin

A plugin to modify the rel/title attributes of <link> elements injected by HTML Webpack Plugin

Link Rel HTML Webpack Plugin

This is an extension plugin for the webpack plugin html-webpack-plugin.

It allows you to modify the rel and title attribute on elements injected by HTML Webpack Plugin. This can be used to specify some stylesheets as alternate stylesheets for accessibility or theming purposes. This is based on the Link Media Webpack Plugin written by Evan Scott which lets you modify the media attribute in a similar fashion.

Installation

You must be running webpack on node 4.x or higher

Install the plugin with npm:

$ npm install --save-dev link-rel-html-webpack-plugin

Basic Usage

Load the plugin

const { LinkRelHtmlWebpackPlugin } = require('link-rel-html-webpack-plugin');

When using Node 4.x or 5.x you don't have deconstruction assignment, instead use:

const LinkRelHtmlWebpackPlugin = require('link-rel-html-webpack-plugin').LinkRelHtmlWebpackPlugin;

and add it to your webpack config as follows:

plugins: [
    // ...
    new HtmlWebpackPlugin(),
    new LinkRelHtmlWebpackPlugin({
        files: [
            { file: /theme-default/, title: 'Default Theme' },
            { file: /theme-dark/, rel: 'alternate stylesheet', title:  => 'Dark Theme' }
        ]
    }),
    // ...
]

You'll need to use this in conjunction with extract-text-webpack-plugin to create CSS stylesheets instead of JS modules for CSS resources.