webpack.resolve.byDependency配置取值及对应触发场景问询

Webpack官方针对resolve.byDependency属性的公开说明内容较少，目前官方文档仅提及该配置的典型取值为'esm'、'commonjs'、'url'。

已确认的基础取值触发规则 #

• 'esm'：使用import x from 'package'; 标准ES Module语法导入模块时触发对应解析配置。
• 'commonjs'：使用require('package'); CommonJS语法导入模块时触发对应解析配置。
• 'url'：使用url-loader等工具处理静态资源、以直接URL形式拉取资源时触发对应解析配置。

其他可使用的取值及适用场景 #

以下取值来自Webpack内部依赖类型定义和实际生产场景验证，可根据项目需求配置对应解析规则：

• 'amd'：项目中使用AMD规范的require(['dep'], cb)、define语法定义/导入异步模块时触发，多用于兼容老AMD架构项目，单独配置AMD模块的解析路径、别名规则，避免和ESM/CJS模块解析逻辑冲突。
• 'worker'：通过new Worker(new URL('./worker.js', import.meta.url))或Webpack内置的Worker导入语法加载Web Worker脚本时触发，可单独为Worker依赖配置解析优先级、别名、扩展名查找顺序，和主应用模块解析逻辑做隔离。
• 'shared'：使用Module Federation模块联邦能力加载共享依赖时触发，可针对联邦共享模块单独配置解析规则，比如指定共享依赖的版本匹配范围、本地兜底查找路径。
• 'css-import'：在CSS/SCSS/LESS等样式文件中通过@import 'xxx'语法导入外部样式资源时触发，可单独配置样式依赖的解析逻辑，比如指定样式文件的专属查找目录、忽略特定前缀的样式导入。
• 'css-url'：在样式代码中通过url('./asset.png')语法引用图片、字体等静态资源时触发，可单独配置CSS内静态资源的解析路径规则，和JS代码中的资源引用解析逻辑做区分。
• 'wasm'：通过ESM语法导入.wasm格式的WebAssembly模块时触发，可单独配置WASM模块的文件查找、后缀匹配规则。
• 'loader'：Webpack内部解析loader依赖路径时触发，一般用于自定义loader的查找优先级，比如配置项目本地自定义loader目录优先于node_modules目录查找。
• 'unknown'：所有无法归类到上述明确模块类型的依赖导入时触发的兜底规则，可用于配置全局兜底的解析逻辑。

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