Link Media HTML Webpack Plugin

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

It automatically adds the media attribute to generated <link> HTML elements, inferred from the CSS filename according to the pattern media_{base64MediaString}:

style.media_KG1pbi13aWR0aDogNzAwcHgpLCBoYW5kaGVsZCBhbmQgKG9yaWVudGF0aW9uOiBsYW5kc2NhcGUp.css

will be injected into the HTML template as:

<link src="styles.media_KG1pbi13aWR0aDogNzAwcHgpLCBoYW5kaGVsZCBhbmQgKG9yaWVudGF0aW9uOiBsYW5kc2NhcGUp.css" rel="stylesheet" media="(min-width: 700px), handheld and (orientation: landscape)" />

This is useful for print stylesheets or desktop/mobile-specific styles that the browser should only load depending on the @media match.

Installation

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

Install the plugin with npm:

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

Basic Usage

Load the plugin

const LinkMediaHtmlWebpackPlugin = require('link-media-html-webpack-plugin');

and add it to your webpack config as follows:

plugins: [
    new HtmlWebpackPlugin(),
    new LinkMediaHtmlWebpackPlugin(),
]

you'll probably want to use this in conjunction with extract-text-webpack-plugin to split up the loaded assets so the browser can do its thing. Here's a sample webpack 2.x config:

const path = require('path');
const webpack = require('webpack');
const HTMLPlugin = require('html-webpack-plugin');
const LinkMediaHTMLPlugin = require('link-media-html-webpack-plugin');

const ExtractPlugin = require('extract-text-webpack-plugin');

// a utility provided by this plugin for easily forming the requisite filename syntax
const getMediaFilename = require('link-media-html-webpack-plugin/get-media-filename');

const getFilePath = (filename) => path.join(__dirname, 'src', filename);

const mainStyleExtractor = new ExtractPlugin('style.css');
const printStyleExtractor = new ExtractPlugin(getMediaFilename(getFilePath('style.print.css')));

webpack({
    entry: getFilePath('entry.js'),
    module: {
      loaders: [
        {
            test: /print\.css$/,
            use: printStyleExtractor.extract('css-loader'),
        }, {
            test: /\.css$/,
            exclude: /print\.css$/,
            use: mainStyleExtractor.extract('css-loader'),
        },
      ],
    },
    output: {
        path: OUTPUT_DIR,
    },
    plugins: [
        mainStyleExtractor,
        printStyleExtractor,
        new HTMLPlugin({
            minify: {
                collapseWhitespace: true,
            },
        }),
        new LinkMediaHTMLPlugin(),
    ],
});