Node.js sendFile无法加载Webpack打包文件问题求助

我来帮你搞定这个问题！你遇到的情况大概率是静态资源托管配置不对，或者Webpack的输出路径没匹配上，咱们一步步排查：

1. 先检查Webpack的输出配置 #

首先确认你的webpack.config.js里的output部分是否正确，这直接决定了打包后的文件位置和引用路径：

const path = require('path');

module.exports = {
  // ...其他配置项
  output: {
    path: path.resolve(__dirname, 'dist'), // 确保打包文件输出到项目根目录的dist文件夹
    filename: 'bundle.js',
    publicPath: '/dist/' // 这个要和你index.html里的引用路径对应
  }
};

这里的publicPath必须和你index.html中<script src="/dist/bundle.js">的路径一致，不然Webpack打包出来的资源引用会出错。

2. Node.js服务器必须托管静态资源 #

如果你的Node.js用的是Express（最常见的情况），不能只靠sendFile返回index.html，必须用express.static来托管dist文件夹，这样服务器才知道/dist/bundle.js是静态资源文件。示例代码如下：

const express = require('express');
const path = require('path');
const app = express();

// 关键：托管dist文件夹，让服务器能识别/dist开头的静态资源请求
app.use('/dist', express.static(path.join(__dirname, 'dist')));

// 返回首页的index.html
app.get('/', (req, res) => {
  // 用path.join拼接绝对路径，避免相对路径的坑
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(3000, () => console.log('服务器运行在3000端口'));

如果不用express.static，Node.js会把/dist/bundle.js当成一个路由请求，而不是静态文件，自然找不到。

3. 验证文件实际存在且路径正确 #

• 手动去项目目录里看dist文件夹是否真的生成了bundle.js，有时候Webpack打包失败（比如语法错误）会导致文件没生成，你可以跑webpack --mode development或者对应的npm build命令，看控制台有没有报错。
• 确认index.html的位置和dist文件夹的相对关系，比如如果index.html在public文件夹下，那引用路径可能需要调整为../dist/bundle.js，不过你现在用的是绝对路径/dist/bundle.js，只要服务器托管正确就没问题。

4. 避免相对路径的坑 #

如果你之前试过相对路径（比如dist/bundle.js不带开头的/），在路由嵌套的情况下容易出问题，你现在用绝对路径是对的，重点还是服务器的静态资源配置。

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