如何让Modernizr与Webpack 4兼容运行？

我之前帮别人搞定过Webpack 4.8.3和Modernizr的集成，给你一套亲测有效的步骤，你可以照着试试：

步骤1：安装正确的依赖包 #

你之前试的包可能不对，别用那些过时的插件了，直接安装这两个适配Webpack 4.8.3的指定版本包就行：

npm install modernizr@3.6.0 modernizr-loader@1.0.1 --save-dev

步骤2：创建Modernizr自定义配置文件 #

在项目根目录下新建一个名为.modernizrrc的JSON配置文件，这里可以自定义你需要检测的特性和Modernizr的行为，示例配置如下：

{
  "minify": true,
  "options": [
    "setClasses",
    "html5printshiv",
    "testProp",
    "fnBind"
  ],
  "feature-detects": [
    "test/css/flexbox",
    "test/es6/promises",
    "test/serviceworker"
  ]
}

• setClasses：让Modernizr自动给<html>标签添加特性检测结果的类名（比如flexbox或no-flexbox）
• html5printshiv：兼容旧版本IE的HTML5标签
• feature-detects：列出你需要检测的具体特性，你可以根据自己的项目需求增减

步骤3：修改Webpack配置文件 #

打开你的webpack.config.js，做两处关键修改：

1. 顶部引入path模块（如果还没引入的话）
2. 添加resolve.alias和对应的loader规则

示例配置片段：

const path = require('path');

module.exports = {
  // 你的其他Webpack配置（entry、output等）...
  resolve: {
    alias: {
      // 让项目中导入modernizr时指向我们的配置文件
      modernizr$: path.resolve(__dirname, '.modernizrrc')
    }
  },
  module: {
    rules: [
      // 你的其他loader规则（babel、css-loader等）...
      {
        test: /\.modernizrrc$/,
        loader: 'modernizr-loader'
      }
    ]
  }
};

步骤4：在项目中引入并使用Modernizr #

在你的主入口JS文件（比如src/index.js）里导入Modernizr，之后就可以直接使用了：

import Modernizr from 'modernizr';

// 示例：检测Flexbox支持
if (Modernizr.flexbox) {
  console.log('当前浏览器支持Flexbox布局');
  // 执行支持Flexbox的逻辑
} else {
  console.log('当前浏览器不支持Flexbox，需要降级处理');
  // 执行兼容逻辑
}

可能遇到的坑点提示 #

• 如果你之前安装过其他Modernizr相关的包，建议先卸载干净，避免冲突：npm uninstall 旧包名 --save-dev
• 确保.modernizrrc是标准JSON格式，不要有多余的逗号，否则Webpack会报错
• 如果运行时提示Modernizr的某些方法不存在，检查你的feature-detects里有没有包含对应的检测模块

内容的提问来源于stack exchange，提问作者klewis