使用Angular Universal SSR+bcrypt时缺失Webpack Loader报错

问题本质 #

bcrypt依赖的@mapbox/node-pre-gyp包含了非JS格式的辅助文件（.html、.cs），Webpack在打包Angular Universal服务端代码时，会尝试解析这些文件，但没有配置对应的处理loader，导致报错。你之前的配置之所以无效，是因为loader规则都排除了node_modules目录，而错误恰恰来自这个目录下的文件；添加.cs到扩展名列表也无法解决问题，因为Webpack仍然会尝试解析这些文件，只是能找到它们而已。

解决方案 #

方案1：将bcrypt标记为外部依赖（推荐）

bcrypt是原生Node.js模块，不需要Webpack打包，直接让Node.js在运行时加载即可。找到服务端Webpack配置文件（通常是webpack.server.config.js，或在angular.json中对应SSR的配置项），添加externals配置：

module.exports = {
  // 其他已有配置...
  externals: {
    bcrypt: 'commonjs bcrypt'
  }
};

这样Webpack会跳过bcrypt的打包流程，直接让Node.js在运行时通过require加载，彻底避免解析node_modules内的非JS文件。

方案2：用null-loader忽略特定文件类型

如果方案1不适用，可通过null-loader让Webpack直接忽略那些引发错误的文件：

1. 先安装依赖：

npm install null-loader --save-dev

2. 在服务端Webpack配置中添加规则：

module.exports = {
  // 其他已有配置...
  module: {
    rules: [
      // 已有规则...
      {
        test: /\.(html|cs)$/,
        include: /node_modules\/@mapbox\/node-pre-gyp/,
        use: 'null-loader'
      }
    ]
  }
};

该规则会让Webpack对@mapbox/node-pre-gyp下的.html和.cs文件不做任何处理，直接跳过解析。

备选方案：替换为bcryptjs

如果上述方案仍有问题，可以考虑用bcryptjs替代bcrypt——它是纯JavaScript实现的加密库，不需要原生编译，也不会依赖包含非JS文件的模块，更适配SSR场景：

1. 安装bcryptjs：

npm install bcryptjs

2. 替换代码中的引用：

// 替换 import bcrypt from 'bcrypt';
import bcrypt from 'bcryptjs';

// 用法和bcrypt完全一致
const hash = bcrypt.hashSync(myPlaintextPassword, saltRounds);

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