Creates a custom Modernizr build during webpack compile. Integrates with html-webpack-plugin.
npm install modernizr-webpack-pluginGenerate a custom modernizr build during webpack compile.
Includes support to integrate with html-webpack-plugin


``sh`
$ npm install modernizr-webpack-plugin
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()
]
}
`
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.
Optional custom output filename. Support included for [hash] and [chunkhash] in output name.modernizr-bundle.js
Defaults to ..js
Note: Will append extension if missing.
`javascript`
var config = {
filename: 'my-bundle-name[chunkhash].js',
}
Option to minify Modernizr bundle. Accepts true, false or object.object
For details of available minify options when using please refer to uglify-jstrue
Defaults to if NODE_ENV is production otherwise false.
`javascript`
var config = {
minify: {
output: {
comments: true,
beautify: true
}
}
}
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]
})
]
}
`
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
``