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 = ;
and add it to your webpack config as follows:
plugins:
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 = ;const webpack = ;const HTMLPlugin = ;const LinkMediaHTMLPlugin = ; const ExtractPlugin = ; // a utility provided by this plugin for easily forming the requisite filename syntaxconst getMediaFilename = ; const getFilePath = path; const mainStyleExtractor = 'style.css';const printStyleExtractor = ; ;