使用Webpack打包时node_modules在异目录引发‘Cannot find module’错误

嘿，既然你已经搞定了awesome-typescript-loader的路径问题，但还残留其他模块的Cannot find module错误，这基本是Webpack和TypeScript没正确识别到外部目录的预构建node_modules导致的。结合你用的Angular 5 + Webpack 2.2.1 + TypeScript 2.3.4技术栈，给你几个针对性的解决办法：

1. 给Webpack配置resolve.modules指定依赖路径 #

Webpack默认只会在项目根目录的node_modules里找依赖，现在你的依赖存放在外部目录，得手动告诉它去哪里找。在你的webpack.config.js里添加如下配置：

module.exports = {
  // ...其他已有配置
  resolve: {
    modules: [
      '/path/to/your/external/node_modules', // 替换成预构建node_modules的绝对路径
      'node_modules' // 保留本地node_modules作为 fallback，防止本地独有依赖找不到
    ]
  }
};

这样Webpack会优先去你指定的外部目录查找模块，找不到再回本地目录兜底。

2. 配置TypeScript的模块解析规则 #

因为你用了TypeScript，TS编译器本身的模块解析逻辑也需要适配外部依赖目录。修改tsconfig.json：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": [
        "/path/to/your/external/node_modules/*",
        "node_modules/*"
      ]
    }
    // ...其他TypeScript配置项
  }
}

这个配置是告诉TS编译器，解析任何模块时先去外部的node_modules目录查找，再尝试本地目录。

3. 检查loader的路径配置（若仍有loader类模块报错） #

如果还有其他loader类的模块找不到，你可以直接在Webpack的loader规则里指定绝对路径，或者确保resolve.modules已经覆盖到它：

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        // 要么用resolve.modules自动查找，要么直接写绝对路径
        loader: 'awesome-typescript-loader',
        // 备选方案：loader: '/path/to/your/external/node_modules/awesome-typescript-loader'
      }
    ]
  }
};

4. 清理缓存后重新构建 #

有时候Webpack或TypeScript的缓存会残留旧的路径信息，建议先清理再重新构建：

• 删除Webpack缓存目录（比如node_modules/.cache/webpack，如果存在的话）
• 删除TS编译输出目录（比如dist或tsconfig.json里outDir指定的目录）
• 重新执行你的构建命令

5. 用环境变量指定依赖路径 #

如果你的部署环境支持设置环境变量，可以通过NODE_PATH来统一指定依赖目录：

# 构建前先设置环境变量
export NODE_PATH=/path/to/your/external/node_modules
# 再执行构建命令
npm run build

Webpack和Node.js都会自动识别NODE_PATH，用来补充模块查找的路径。

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