Webpack 5 如何屏蔽来自node_modules的构建警告

Webpack 原生支持通过 stats.warningsFilter 配置项做警告的细粒度过滤，完全可以实现仅屏蔽node_modules内部警告、保留业务代码警告的需求，具体实现有两种可选方案：

方案1：屏蔽所有node_modules目录产生的警告 #

直接在你的webpack配置文件（一般为webpack.config.js）中添加如下配置即可：

module.exports = {
  // 你项目的其他现有配置（entry、output、module等保持不变）
  stats: {
    warningsFilter: [
      // 过滤所有路径包含node_modules的警告
      warning => warning.includes('node_modules'),
    ]
  },
  // webpack-dev-server 3.x版本也可在devServer字段下同步配置，和顶层stats配置二选一即可
  devServer: {
    // 你的其他devServer现有配置保持不变
    stats: {
      warningsFilter: [
        warning => warning.includes('node_modules'),
      ]
    }
  }
}

这种方案配置最简单，完全符合保留业务代码警告、仅屏蔽第三方依赖警告的需求，绝大多数场景直接用这个即可。

方案2：仅屏蔽当前esri-leaflet相关的特定警告 #

如果你不想过滤所有第三方包的警告，避免漏掉有用的依赖兼容提示，可以只针对性过滤当前遇到的这条警告，配置如下：

module.exports = {
  stats: {
    warningsFilter: [
      warning => 
        // 匹配警告中包含esri-leaflet相关路径，或者匹配警告的具体文本
        warning.includes('esri-leaflet-geocoder') || 
        warning.includes("Should not import the named export 'version'")
    ]
  }
}

注意：warningsFilter 支持传入字符串、正则、或者返回布尔值的函数，返回true就代表对应警告会被过滤，不会在编译控制台输出。

配置完成后重启webpack dev-server，对应的警告就会消失，业务代码产生的警告会正常输出，不会受到影响。

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