link-media-html-webpack-plugin
Version:
Parses CSS filenames to tag link elements with media attributes.
97 lines (72 loc) • 3.27 kB
Markdown
Link Media HTML Webpack Plugin
==============================
[](https://travis-ci.org/probablyup/link-media-html-webpack-plugin) [](https://codecov.io/gh/probablyup/link-media-html-webpack-plugin)
This is an extension plugin for the [webpack](http://webpack.github.io) plugin [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin).
It automatically adds the [media attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes) 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:
```shell
$ npm install --save-dev link-media-html-webpack-plugin
```
Basic Usage
-----------
Load the plugin
```js
const LinkMediaHtmlWebpackPlugin = require('link-media-html-webpack-plugin');
```
and add it to your webpack config as follows:
```js
plugins: [
new HtmlWebpackPlugin(),
new LinkMediaHtmlWebpackPlugin(),
]
```
you'll probably want to use this in conjunction with [extract-text-webpack-plugin](https://github.com/webpack-contrib/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:
```js
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(),
],
});
```