React应用QA环境bundle.js加载失败问题（Webpack配置排查）

问题现象 #

本地环境访问http://localhost:8001可正常加载bundle.js及相关资源；但部署至QA环境后，访问https://<MY_QA_URL>/ccweb时，bundle.js的请求路径为https://<MY_QA_URL>/bundle.js，而非预期的https://<MY_QA_URL>/ccweb/bundle.js，导致资源加载失败。

环境与配置详情 #

项目目录结构 #

ccweb/
├── dist/
├── node_modules/
├── public/
├── src/
├── .babelrc
├── .gitignore
├── ecosystem.json
├── package-lock.json
├── package.json
├── server.js
└── webpack.config.js

QA环境服务器配置（server.js） #

静态资源路由配置：

app.use("/ccweb", express.static(path.join(__dirname, "dist"), { etag: false, lastModified: false}));
app.use("/assets", express.static(path.join(__dirname, "dist", "assets"), { etag: false, lastModified: false}));

重定向逻辑：

if (req.url == "/" || req.originalUrl == "/" | !req.url.startsWith("ccweb")) {
   res.redirect("ccweb/login");
} else {
   res.sendFile(path.join(__dirname, "/dist/index.html"));
}

Webpack核心配置 #

const config = {
    entry: './src/index.js',
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "/", // 关键配置项
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
        }),
    ],
    // 其余module规则省略
};

index.html资源引用 #

<script src="/bundle.js"></script>

问题原因分析 #

1. Webpack publicPath配置不匹配部署路径：Webpack的output.publicPath设置为"/"，意味着所有构建生成的资源都会以根路径作为前缀。但QA环境中应用部署在/ccweb子路径下，导致资源请求路径缺少/ccweb前缀，无法匹配server.js中配置的静态资源路由。
2. index.html硬编码资源路径：手动写入的<script src="/bundle.js"></script>固定了根路径，没有适配部署子路径的场景，即使Webpack配置正确，硬编码路径也会导致请求错误。
3. 重定向逻辑存在语法错误：条件中的|是位运算符，应改为逻辑或||，可能导致重定向逻辑异常。
4. assets路由路径不匹配：server.js中/assets路由对应dist/assets目录，但如果资源路径生成时带有/ccweb前缀，该路由无法匹配请求。

解决方案 #

1. 修改Webpack publicPath配置
   将output.publicPath改为"/ccweb/"，确保所有构建生成的资源路径都带有/ccweb前缀：

   output: {
       filename: "bundle.js",
       path: path.resolve(__dirname, "dist"),
       publicPath: "/ccweb/",
   },
   

2. 移除index.html中的硬编码bundle引用
   删除手动添加的<script src="/bundle.js"></script>，让HtmlWebpackPlugin自动注入Webpack构建生成的正确路径的资源引用，避免路径不一致问题。

3. 修正server.js的assets路由
   将assets路由改为/ccweb/assets，匹配publicPath生成的资源路径：

   app.use("/ccweb/assets", express.static(path.join(__dirname, "dist", "assets"), { etag: false, lastModified: false}));
   

4. 修复重定向逻辑的语法错误
   将位运算符|替换为逻辑或||：

   if (req.url == "/" || req.originalUrl == "/" || !req.url.startsWith("ccweb")) {
      res.redirect("ccweb/login");
   } else {
      res.sendFile(path.join(__dirname, "/dist/index.html"));
   }
   

内容的提问来源于stack exchange，提问作者Vinicius Bretzke Müller