Webpack引入依赖包时提示Can't resolve 'axios'错误如何解决

你理解的Node.js运行时依赖查找逻辑是正确的，但Webpack构建时的默认模块解析规则不会自动遍历所有依赖包内部的node_modules目录，只会从你配置的resolve.modules路径（默认是当前项目B的根目录node_modules，再逐层向上）查找。包A内部的node_modules不在Webpack的默认查找路径里，所以A的编译产物中导入axios的语句会解析失败。

你贴的配置里resolve.modules新增了上级src目录，仅会在B的源码目录下查找模块，既不会匹配到A内部node_modules里的axios，反而会拉高源码目录的查找优先级，容易引发其他模块解析冲突。

方案1：修改B的Webpack配置，指定axios的解析路径 #

直接给axios配置别名，定位到包A内部的axios安装路径即可，改动最小，示例配置：

const path = require('path');
module.exports = {
  // 其他原有配置保留
  resolve: {
    alias: {
      // 直接指定axios的解析路径为A包内的安装路径
      'axios': path.resolve(__dirname, './node_modules/A/node_modules/axios'),
      // 你原来的其他alias配置保留
      src: path.resolve(__dirname, "..", "src"),
    },
    modules: [path.resolve(__dirname, "..", 'src'), 'node_modules'],
    extensions: [".js", ".jsx", ".ts", ".tsx", ".json"],
  }
}

如果担心安装结构变化导致路径失效，可以用动态计算的方式写路径，兼容性更强：

'axios': path.resolve(path.dirname(require.resolve('A/package.json')), 'node_modules/axios')

方案2：调整包A的打包逻辑，把axios打入A的产物 #

如果你可以维护包A的代码，这个方案更通用，不需要所有依赖A的项目都修改Webpack配置：

• 在包A的package.json中添加"bundledDependencies": ["axios"]，打包时会把axios纳入A的产物
• 如果你用Rollup/Vite等工具打包A，不要把axios设为external依赖，打包后A的dist代码里不会存在对axios的外部导入语句，引入到B中自然不会触发依赖查找。

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