Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/quantizor/link-media-html-webpack-plugin
parses CSS filenames to automatically apply media HTML attribute to link elements
https://github.com/quantizor/link-media-html-webpack-plugin
html-webpack-plugin
Last synced: 3 days ago
JSON representation
parses CSS filenames to automatically apply media HTML attribute to link elements
- Host: GitHub
- URL: https://github.com/quantizor/link-media-html-webpack-plugin
- Owner: quantizor
- License: mit
- Created: 2017-02-05T17:09:07.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-05-18T13:54:37.000Z (over 4 years ago)
- Last Synced: 2024-12-06T23:33:15.981Z (16 days ago)
- Topics: html-webpack-plugin
- Language: JavaScript
- Size: 3.04 MB
- Stars: 15
- Watchers: 1
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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 `` 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:
```
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(),
],
});
```