Node.js+Express+Webpack项目中如何正确配置静态文件路径？

核心问题分析 #

你遇到的本质问题是：开发阶段，Express服务文件/server/index.js的位置决定了相对路径的基准；但Webpack打包后，bundle.js的位置变了，而且部署时通常只会把dist目录的内容放到服务器上，这时候原有的相对路径就失效了。

方案1：环境变量+动态路径适配 #

通过判断当前运行环境，结合__dirname（需配置Webpack保留其原始值）动态设置静态文件路径，确保开发和生产环境都能正确定位：

1. 先在Webpack配置中添加node选项，避免Webpack替换__dirname的值：

// webpack.config.js
module.exports = {
  // 其他配置项...
  node: {
    __dirname: false,
  },
};

2. 在Express服务代码中根据环境变量切换路径：

// server/index.js
const path = require('path');
const express = require('express');
const app = express();

// 开发环境指向前端源码目录，生产环境指向打包后的public目录
const staticPath = process.env.NODE_ENV === 'production'
  ? path.resolve(__dirname, 'public') // 部署时bundle.js与public同目录，直接取当前目录下的public
  : path.resolve(__dirname, '../frontend'); // 开发时从server目录向上找frontend

app.use(express.static(staticPath));

// 其他路由、服务逻辑...

部署时确保dist目录结构如下，这样启动bundle.js时，__dirname就是dist目录，路径能正确匹配：

dist
---bundle.js
---public/
------assets/
------index.html

方案2：调整Webpack输出结构，统一路径基准 #

修改Webpack配置，让打包后的服务端bundle和静态文件处于同一层级，简化路径判断逻辑：

1. 用copy-webpack-plugin把前端静态文件复制到dist/public，同时配置Webpack输出到dist根目录：

// webpack.config.js
const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: './frontend', to: './public' }, // 将frontend内容复制到dist/public
      ],
    }),
  ],
  node: {
    __dirname: false,
  },
};

2. 服务端代码统一用基于__dirname的路径：

// server/index.js
const staticPath = path.resolve(
  __dirname,
  process.env.NODE_ENV === 'production' ? './public' : '../frontend'
);
app.use(express.static(staticPath));

关键注意事项 #

• 永远不要用纯相对路径（比如express.static("public")），Node.js的相对路径基于进程启动的工作目录，而非当前文件所在目录，极易出错。
• 如果使用ES模块（import/export），可以用import.meta.url替代__dirname，示例：

const staticPath = path.resolve(
  new URL('.', import.meta.url).pathname,
  process.env.NODE_ENV === 'production' ? 'public' : '../frontend'
);

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