移除.npmrc中shamefully-hoist=true后，pnpm+webpack模块解析失败求助

问题背景 #

移除.npmrc中的shamefully-hoist=true配置后，使用pnpm配合webpack构建时出现大量Module not found: Error: Can't resolve '***'错误。经排查，pnpm将所有第三方依赖统一存放在root/node_modules/.pnpm/node_modules路径下，而webpack默认的模块搜索路径不包含这个位置，导致无法定位到依赖模块。

已验证的解决方案 #

以下两种webpack配置方案可解决该问题：

• 方案1：配置resolve.fallback
  针对缺失的模块，直接指定其实际路径或禁用该模块的解析需求：

  resolve: {
    fallback: {
      // 示例：为buffer模块指定解析路径
      buffer: require.resolve('buffer'),
      // 示例：禁用util模块的解析
      util: false
    }
  }
  

• 方案2：扩展resolve.modules的搜索路径
  将pnpm实际存放模块的目录添加到webpack的模块搜索列表中：

  resolve: {
    modules: ['node_modules', 'node_modules/.pnpm/node_modules']
  }
  

为什么webpack会找不到这些模块 #

核心原因在于pnpm的模块隔离机制与webpack默认搜索逻辑的差异：

1. pnpm的严格模块布局
   禁用shamefully-hoist=true后，pnpm会采用更严格的依赖隔离布局：所有第三方依赖都会被集中存放在root/node_modules/.pnpm/node_modules中，项目根目录的node_modules仅包含直接依赖的软链接，不会将嵌套依赖"提升"到根目录层级——这也是shamefully-hoist配置的核心作用：强制将所有依赖提升到根目录，兼容那些依赖全局模块或模块引用不规范的包。
2. webpack的默认搜索逻辑
   webpack默认的模块搜索规则是：从当前模块所在目录向上逐层查找node_modules文件夹，同时会搜索项目根目录的node_modules。但它不会自动深入到node_modules下的.pnpm/node_modules子目录进行搜索，因此无法找到pnpm存放的实际依赖模块。
3. shamefully-hoist=true时正常的原因
   开启该配置后，pnpm会模拟npm/yarn的扁平依赖布局，将所有依赖（包括嵌套依赖）都提升到项目根目录的node_modules下，与webpack的默认搜索路径匹配，因此不会出现解析错误。

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