Webpack resolve.fallback无法处理util/types或stream/web问题求助

问题描述 #

尝试为stream/web和util/types配置polyfill或禁用解析，但Webpack的resolve.fallback无法识别这类带斜杠的子模块依赖。使用如下Webpack配置：

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

const path = require("path");

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },

  plugins: [new NodePolyfillPlugin()],
  resolve: {
    fallback: {
      "util/types": false,
      "stream/web": false,
      perf_hooks: false,
      async_hooks: false,
      dns: false,
      tls: false,
      child_process: false,
      fs: false,
      net: require.resolve("net-websocket-polyfill"),
      diagnostics_channel: require.resolve("diagnostics_channel"),
      worker_threads: require.resolve("bthreads"),
    },
  },
};

执行构建时仍报错：

Module not found: Error: Can't resolve 'stream/web'
Module not found: Error: Can't resolve 'util/types'

解决办法 #

Webpack的resolve.fallback仅支持配置顶级模块名（如util、stream），无法直接处理带路径后缀的子模块。要解决这个问题，需要通过resolve.alias来配置这类子模块：

方案1：用resolve.alias直接映射 #

在Webpack配置的resolve节点下添加alias字段，将目标子模块指向polyfill包或直接禁用：

resolve: {
  fallback: {
    // 保留原有顶级模块的fallback配置
    perf_hooks: false,
    async_hooks: false,
    dns: false,
    tls: false,
    child_process: false,
    fs: false,
    net: require.resolve("net-websocket-polyfill"),
    diagnostics_channel: require.resolve("diagnostics_channel"),
    worker_threads: require.resolve("bthreads"),
  },
  alias: {
    // 禁用子模块解析
    "util/types": false,
    "stream/web": false,
    // 若需polyfill，替换为对应包的路径，示例：
    // "stream/web": require.resolve("stream-web-polyfill"),
    // "util/types": require.resolve("util-types-polyfill")
  }
}

方案2：结合NodePolyfillPlugin调整 #

如果依赖NodePolyfillPlugin处理大部分polyfill，可通过插件配置排除不需要的子模块，再配合alias自定义处理。但直接用alias是更直接的方式。

注意事项 #

• 设为false表示Webpack会忽略该模块的解析请求，适合确认不需要该模块的场景。
• 若需要polyfill，需先安装对应的npm包，确保路径正确。

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