Generate a custom modernizr build during webpack compile. Includes support to integrate with html-webpack-plugin
This fork provides an additional option to add modernizr bundle to existing vendor bundle
example:
new ModernizrWebpackPlugin({ filename: "vendor.bundle", addToExistingBundle: true, noChunk: true, minify: true, "options": [ "setClasses" ], "feature-detects": [ "test/touchevents" ] }),
output: vendor contains modernizr and other libs if you configure webpack output before..
$ npm install modernizr-webpack-plugin
Add the modernizr-webpack-plugin to your list of plugins in the webpack config
// 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.
// 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 ModernizrPlugin(config)
]
}
Additional options available via following config properties.
Type: string
Optional custom output filename. Support included for [hash]
in output name.
Defaults to modernizr-bundle.js
.
Note: Will append .js
extension if missing.
var config = {
filename: 'my-bundle-name[hash].js',
}
Type: boolean | object
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
.
var config = {
minify: {
output: {
comments: true,
beautify: true
}
}
}
Type: boolean | object | array
Option to include support for html-webpack-plugin.
Defaults to true
.
// define variable if specifying instance to inject into
var plugin = new HtmlWebpackPlugin();
webpackConfig = {...
plugins: [
plugin,
new ModernizrPlugin({
// 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]
})
]
}
Type: boolean
Option to simplify html-webpack-plugin template reference
Defaults to false
.
var htmlWebpackPluginConfig = {
template:'template.html'
}
var modernizrPluginConfig = {
filename: 'mybundle',
noChunk: true
}
template.html
<!-- example of template without noChunk-->
<script src="{%= o.htmlWebpackPlugin.files.chunks['mybundle'].entry %}"></script>
<!-- example of template WITH noChunk-->
<script src="{%= o.htmlWebpackPlugin.files.mybundle %}"></script>