Webpack4升级至Webpack5后静态资源加载失败问题求助

升级背景 #

近期将Webpack从4.x版本升级至5.91.0，使用Node.js 14环境，通过AWS CodePipeline部署至ECR Docker环境，镜像路径与本地一致。

依赖配置（package.json） #

{
  "css-loader": "^3.4.0",
  "file-loader": "^6.2.0",
  "ts-loader": "^6.2.1",
  "typescript": "^3.9.9",
  "url-loader": "^4.1.1",
  "webpack": "^5.91.0",
  "webpack-cli": "^5.1.4",
  "webpack-node-externals": "^3.0.0"
}

注：除ts-loader外声明其余依赖为最新版本，但css-loader版本明显滞后于Webpack5兼容要求

Webpack配置修改点 #

仅调整了output相关属性：

config.output.chunkLoadingGlobal = 'loginServiceJsonP';
config.output.hotUpdateGlobal = 'loginServiceWebpackJsonp';

服务器包内Webpack配置路径为<servicePackage>/webpack/withAssets，静态资源输出路径为<servicePackage>/dist/assets/login，已验证本地路径正确性。

部署后报错信息 #

Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Refused to execute script from '<service endpoint url>/404' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

VM733:73 Uncaught TypeError: Cannot read properties of undefined (reading 'initRingSiteHeapJS')
    at <anonymous>:73:22
    at consent-manager.js?l…&loggedIn=0:1:23208
    at Array.forEach (<anonymous>)
    at consent-manager.js?l…&loggedIn=0:1:23118
    at e.value (consent-manager.js?l…&loggedIn=0:1:23292)
    at e.value (consent-manager.js?l…&loggedIn=0:1:11932)
    at HTMLDocument.<anonymous> (consent-manager.js?l…&loggedIn=0:1:26709)

问题 #

是否遗漏了关键配置或文件设置？该问题由依赖版本不兼容还是Webpack配置缺失导致？求具体排查思路。

排查思路 #

1. 优先解决静态资源404问题（核心诱因） #

报错中出现/404路径，说明静态资源请求未被正确路由到dist/assets/login目录：

• 检查Webpack的output.publicPath配置：Webpack5升级后需显式设置该属性，确保编译后的资源引用路径与部署环境的静态资源访问路径匹配（例如部署后静态资源路径前缀为/assets/login/，则需设置publicPath: '/assets/login/'）。
• 验证服务器路由配置：确认Docker容器内的应用服务器（如Nginx、Express）已将/assets/login/**的请求映射到dist/assets/login目录，避免请求被转发到服务端业务路由返回404页面（即text/html类型）。

2. 修复依赖版本兼容性问题 #

• ts-loader版本过低：ts-loader@6.2.1仅兼容Webpack4，Webpack5需使用ts-loader@8.0.0及以上版本，旧版本会导致模块编译逻辑不兼容，引发资源路径错误或模块加载失败。
• css-loader版本不兼容：css-loader@3.4.0为Webpack4适配版本，与Webpack5存在兼容性问题，需升级至css-loader@5.0.0+版本，否则可能导致CSS资源打包路径错误或无法正确解析。
• 考虑替换file-loader/url-loader为Webpack5内置Asset模块：Webpack5已原生支持资源打包，无需依赖file-loader/url-loader，可将配置切换为type: 'asset/resource'（替代file-loader）或type: 'asset/inline'（替代url-loader），避免旧loader与Webpack5的模块系统冲突。

3. 排查全局变量未定义问题 #

最后出现的initRingSiteHeapJS未定义错误，大概率是依赖的脚本因404未加载成功导致，解决上述资源加载问题后可验证是否自动修复；若仍存在问题：

• 检查consent-manager.js依赖的全局变量是否通过Webpack正确暴露，Webpack5中需使用output.library配置或expose-loader来挂载全局变量，替代Webpack4的旧有方式。

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