升级SignalR v8.0后Webpack生成异常Bundle文件问题求助

问题分析 #

升级SignalR至v8.0后，Webpack生成了一个包含abort-controller、eventsource、fetch-cookie、node-fetch、tough-cookie、ws等被标记为ignored依赖的额外Chunk文件，且必须引入该文件才能让应用正常运行。这是因为SignalR v8.0调整了依赖引入逻辑，这些原本针对Node.js环境的依赖，在浏览器环境下被Webpack识别但未正确处理，最终被单独打包成空Chunk。

解决方案 #

1. 配置Webpack别名替换/忽略Node端依赖 #

在webpack.config.js中添加resolve.alias配置，将Node专属依赖替换为浏览器兼容实现或直接忽略：

module.exports = {
  // ...其他Webpack配置
  resolve: {
    alias: {
      // 替换为浏览器兼容版本
      'abort-controller': 'abort-controller/dist/abort-controller.umd.js',
      'eventsource': 'eventsource/lib/eventsource.js',
      'node-fetch': 'whatwg-fetch',
      // 浏览器环境无需这些Node端依赖，直接忽略
      'tough-cookie': false,
      'ws': false,
      'fetch-cookie': false
    }
  }
};

2. 用IgnorePlugin主动排除不必要的依赖 #

配合别名配置，在Webpack插件中添加IgnorePlugin强制排除Node端依赖：

const webpack = require('webpack');

module.exports = {
  // ...其他Webpack配置
  plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /^(tough-cookie|ws|fetch-cookie)$/
    })
  ]
};

3. 确认SignalR的正确导入方式 #

确保代码中导入的是SignalR的浏览器版本，而非Node.js专属版本：

// 正确的浏览器端导入
import { HubConnectionBuilder } from '@microsoft/signalr';

// 避免导入Node端专属包
// import { HubConnectionBuilder } from '@microsoft/signalr/node';

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

执行以下命令清理构建缓存，确保新配置生效：

rm -rf node_modules/.cache
npm run build

完成上述配置后，重新构建项目即可消除那个额外的空依赖Bundle，无需引入该文件也能正常运行SignalR功能。

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