Webpack中如何仅为单个特定依赖单独指定目标解析规则？

Webpack 5 原生支持为特定依赖单独指定导出解析规则，你之前全局配置resolve.conditionNames的写法确实会对所有模块生效，没法满足单包定向配置的需求，以下两种方案都可以实现仅解析some-dependency时匹配其exports字段下的node导出条件。

方案1：规则级resolve覆盖（推荐，Webpack 5.0+ 全版本支持） #

Webpack 允许在module.rules中为匹配到的模块单独覆盖解析配置，作用域仅限定在匹配的模块上，不会影响其他依赖的解析逻辑，配置如下：

module.exports = {
  // 其余原有配置保持不变
  resolve: {
    extensions: [".jsx", ".js"],
    // 全局保留浏览器端默认解析条件即可，不要全局加node
    conditionNames: ["browser", "import", "require"],
  },
  module: {
    rules: [
      {
        // 精准匹配node_modules下的some-dependency包
        test: /[\\/]node_modules[\\/]some-dependency[\\/]/,
        resolve: {
          // 仅对该包生效的解析条件，优先匹配exports下的node条目
          conditionNames: ["node", "import", "require"],
        },
      },
    ],
  },
};

方案2：内置插件定向修改解析配置（兼容低版本Webpack 5） #

如果使用的Webpack 5小版本较低不支持规则内覆盖resolve，可以用Webpack内置的NormalModuleReplacementPlugin，在解析到目标包时动态修改解析参数：

const { NormalModuleReplacementPlugin } = require('webpack');

module.exports = {
  // 其余原有配置保持不变
  resolve: {
    extensions: [".jsx", ".js"],
    conditionNames: ["browser", "import", "require"],
  },
  plugins: [
    new NormalModuleReplacementPlugin(
      /^some-dependency$/,
      (resource) => {
        // 解析该包时强制使用node导出条件
        resource.resolveOptions.conditionNames = ["node", "import", "require"];
      }
    ),
  ],
};

原有配置的问题 #

你之前尝试的配置存在两个明显问题：

• 全局配置conditionNames会作用于所有第三方依赖的exports解析，会导致其他面向浏览器的依赖错误加载node版本产物
• 数组里的some-dependency不是CommonJS/ESM exports规范定义的标准条件名，Webpack解析时会直接忽略该字段，不会产生任何匹配效果。

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