modernizr-webpack-plugin

Generate a custom modernizr build during webpack compile.
Includes support to integrate with html-webpack-plugin


Install

``sh
$ npm install modernizr-webpack-plugin
`

Usage

Add the modernizr-webpack-plugin to your list of plugins in the webpack config

`javascript
// webpack.config.js
var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');

module.exports = {
entry: 'app.js',
output: {
filename: 'app-bundle.js'
},
plugins: [
new ModernizrWebpackPlugin()
]
}
`

Config

ModernizrWebpackPlugin supports all the options available to Modernizr.

`javascript
// webpack.config.js
...
var config = {
'feature-detects': [
'input',
'canvas',
'css/resize'
]
}

module.exports = {
...
plugins: [
// Output modernizr-bundle.js with 'input',
// 'canvas' and 'css/resize' feature detects
new ModernizrWebpackPlugin(config)
]
}
`

Additional options available via following config properties.

$3

Optional custom output filename. Support included for [hash] and [chunkhash] in output name.
Defaults to modernizr-bundle.js.
Note: Will append .js extension if missing.

`javascript
var config = {
filename: 'my-bundle-name[chunkhash].js',
}
`

$3

Option to minify Modernizr bundle. Accepts true, false or object.
For details of available minify options when using object please refer to uglify-js
Defaults to true if NODE_ENV is production otherwise false.

`javascript
var config = {
minify: {
output: {
comments: true,
beautify: true
}
}
}
`

htmlWebpackPlugin

Option to include support for html-webpack-plugin.
Defaults to true.

`javascript
// define variable if specifying instance to inject into
var plugin = new HtmlWebpackPlugin();
webpackConfig = {...
plugins: [
plugin,
new ModernizrWebpackPlugin({
// auto search through all webpack plugins for compatible
// html-webpack-plugins and inject into all
htmlWebpackPlugin: true
// OR disable any html-webpack-plugin injection
htmlWebpackPlugin: false
// OR inject into the instance specified
htmlWebpackPlugin: plugin
// OR inject into each of the instances specified
htmlWebpackPlugin: [plugin]
})
]
}

`

noChunk

Option to simplify html-webpack-plugin template reference
Defaults to false.

`javascript
var htmlWebpackPluginConfig = {
template:'template.html'
}
var modernizrPluginConfig = {
filename: 'mybundle',
noChunk: true
}
`

_template.html_
`html



``