Modernizr Webpack Plugin

1.0.7 verified Sat Apr 25 auth: no javascript maintenance

Generates a custom Modernizr build during webpack compilation with optional html-webpack-plugin integration. Latest version 1.0.7 is stable but no updates since 2017. Key differentiator: automates Modernizr detection feature selection in webpack pipelines, supports [hash] and [chunkhash] in filenames, and can inject script tags into HTML via html-webpack-plugin. Limited to webpack 3 and below; does not support webpack 4 or 5 natively.

Common errors

error Error: Cannot find module 'modernizr-webpack-plugin' ↓

cause Package not installed or using wrong import syntax in ESM environment.

fix

Run: npm install modernizr-webpack-plugin --save-dev. Use require() instead of import.

error TypeError: ModernizrWebpackPlugin is not a constructor ↓

cause Importing from the package incorrectly (e.g., using default import in ESM).

fix

Use: const ModernizrWebpackPlugin = require('modernizr-webpack-plugin');

error Error: html-webpack-plugin not found or not compatible ↓

cause html-webpack-plugin not installed or incompatible version (requires version 2.x or 3.x).

fix

Install html-webpack-plugin@3.2.0 or use htmlWebpackPlugin: false.

Warnings

breaking Plugin incompatible with webpack 4+; may cause build failures or silently produce no output. ↓

fix Use modernizr-webpack-plugin with webpack 3 or lower, or switch to an alternative like custom-modernizr-webpack-plugin.

deprecated The htmlWebpackPlugin option accepts instance but that use is deprecated; use boolean or array instead. ↓

fix Set htmlWebpackPlugin: true or false, or pass an array of instances if needed.

gotcha If filename does not end with .js, the plugin appends it automatically; this may cause unexpected double extensions. ↓

fix Ensure filename ends with '.js' explicitly to avoid duplication.

gotcha minify option defaults based on NODE_ENV=production, which may not be intended in all build scenarios. ↓

fix Explicitly set minify: true/false in config.

Install

npm install modernizr-webpack-plugin

yarn add modernizr-webpack-plugin

pnpm add modernizr-webpack-plugin

Imports

ModernizrWebpackPlugin

wrong

import ModernizrWebpackPlugin from 'modernizr-webpack-plugin';

correct

const ModernizrWebpackPlugin = require('modernizr-webpack-plugin');

Package uses CommonJS and has no default ESM export; named require is correct.

ModernizrWebpackPlugin (with config)

wrong

plugins: [new ModernizrWebpackPlugin({options: { 'feature-detects': ['input'] }})]

correct

plugins: [new ModernizrWebpackPlugin({ 'feature-detects': ['input'] })]

Config is passed directly to the constructor, not nested under 'options'.

htmlWebpackPlugin option

wrong

new ModernizrWebpackPlugin({ htmlWebpackPlugin: myHtmlPluginInstance })

correct

new ModernizrWebpackPlugin({ htmlWebpackPlugin: true })

Passing the plugin instance directly works but is deprecated in favor of boolean or array.

Quickstart

Shows basic webpack config with Modernizr plugin, feature detection list, and html-webpack-plugin integration.

const ModernizrWebpackPlugin = require('modernizr-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new ModernizrWebpackPlugin({
      'feature-detects': [
        'input',
        'canvas',
        'css/resize'
      ],
      minify: process.env.NODE_ENV === 'production' ? true : false
    })
  ]
};