升级至Webpack5后出现require.extensions不支持等警告该如何处理

你遇到的这三类警告核心原因是业务代码中错误引入了仅适用于Node.js环境的webpack-cli相关依赖，和webpack的resolve配置没有关系，修改resolve配置无法解决该问题。
两类警告的具体触发逻辑：

• require.extensions is not supported by webpack：require.extensions是Node.js独有的模块扩展加载机制，浏览器环境不支持也不建议使用，webpack打包前端代码时识别到该语法就会抛出警告
• Critical dependency: the request of a dependency is an expression：rechoir模块内部使用了动态require语法，webpack无法静态分析出需要打包的具体依赖，因此抛出提示

直接检查你的./js/components/global.js文件第二行的导入语句，你错误引入了webpack-cli/lib/utils/logger这个属于webpack命令行工具的内部模块，该模块完全不需要被打包进前端业务代码，删除这行错误的导入语句即可一次性消除所有警告，不需要添加任何额外配置。

如果确实有特殊需求必须保留该引用，可通过如下webpack配置消除警告：

1. 先安装ignore-loader用于忽略不需要解析的Node端模块：
   npm install ignore-loader --save-dev

2. 修改webpack.config.js配置：

module.exports = {
  // 其余原有配置保持不变
  module: {
    rules: [
      // 新增规则，忽略interpret、rechoir两个模块的解析
      {
        test: /node_modules\/(interpret|rechoir)\//,
        use: 'ignore-loader'
      }
    ]
  },
  // 屏蔽rechoir模块的动态依赖警告
  ignoreWarnings: [
    {
      module: /node_modules\/rechoir\/lib\/register\.js/
    }
  ]
}

• 非必要不建议使用兼容方案，错误引入webpack-cli相关代码会增大产物体积，也不会对业务逻辑产生任何作用
• 不需要修改webpack.config中的resolve配置，该配置用于定义模块解析规则，无法解决当前的警告问题

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