{"id":20219,"library":"modernizr-webpack-plugin","title":"Modernizr Webpack Plugin","description":"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.","status":"maintenance","version":"1.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/alexpalombaro/modernizr-webpack-plugin","tags":["javascript","webpack","plugin","modernizr","html-webpack-plugin"],"install":[{"cmd":"npm install modernizr-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add modernizr-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add modernizr-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runs as a webpack plugin during compilation","package":"webpack","optional":false},{"reason":"Optional integration for injecting Modernizr script into HTML","package":"html-webpack-plugin","optional":true}],"imports":[{"note":"Package uses CommonJS and has no default ESM export; named require is correct.","wrong":"import ModernizrWebpackPlugin from 'modernizr-webpack-plugin';","symbol":"ModernizrWebpackPlugin","correct":"const ModernizrWebpackPlugin = require('modernizr-webpack-plugin');"},{"note":"Config is passed directly to the constructor, not nested under 'options'.","wrong":"plugins: [new ModernizrWebpackPlugin({options: { 'feature-detects': ['input'] }})]","symbol":"ModernizrWebpackPlugin (with config)","correct":"plugins: [new ModernizrWebpackPlugin({ 'feature-detects': ['input'] })]"},{"note":"Passing the plugin instance directly works but is deprecated in favor of boolean or array.","wrong":"new ModernizrWebpackPlugin({ htmlWebpackPlugin: myHtmlPluginInstance })","symbol":"htmlWebpackPlugin option","correct":"new ModernizrWebpackPlugin({ htmlWebpackPlugin: true })"}],"quickstart":{"code":"const ModernizrWebpackPlugin = require('modernizr-webpack-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    filename: 'bundle.js',\n    path: __dirname + '/dist'\n  },\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new ModernizrWebpackPlugin({\n      'feature-detects': [\n        'input',\n        'canvas',\n        'css/resize'\n      ],\n      minify: process.env.NODE_ENV === 'production' ? true : false\n    })\n  ]\n};","lang":"javascript","description":"Shows basic webpack config with Modernizr plugin, feature detection list, and html-webpack-plugin integration."},"warnings":[{"fix":"Use modernizr-webpack-plugin with webpack 3 or lower, or switch to an alternative like custom-modernizr-webpack-plugin.","message":"Plugin incompatible with webpack 4+; may cause build failures or silently produce no output.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Set htmlWebpackPlugin: true or false, or pass an array of instances if needed.","message":"The htmlWebpackPlugin option accepts instance but that use is deprecated; use boolean or array instead.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Ensure filename ends with '.js' explicitly to avoid duplication.","message":"If filename does not end with .js, the plugin appends it automatically; this may cause unexpected double extensions.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Explicitly set minify: true/false in config.","message":"minify option defaults based on NODE_ENV=production, which may not be intended in all build scenarios.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm install modernizr-webpack-plugin --save-dev. Use require() instead of import.","cause":"Package not installed or using wrong import syntax in ESM environment.","error":"Error: Cannot find module 'modernizr-webpack-plugin'"},{"fix":"Use: const ModernizrWebpackPlugin = require('modernizr-webpack-plugin');","cause":"Importing from the package incorrectly (e.g., using default import in ESM).","error":"TypeError: ModernizrWebpackPlugin is not a constructor"},{"fix":"Install html-webpack-plugin@3.2.0 or use htmlWebpackPlugin: false.","cause":"html-webpack-plugin not installed or incompatible version (requires version 2.x or 3.x).","error":"Error: html-webpack-plugin not found or not compatible"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}