Express 找不到 Webpack 包答案

【问题标题】：Express can't find Webpack bundleExpress 找不到 Webpack 包
【发布时间】：2019-07-04 02:58:38
【问题描述】：

所以我一直在配置一个 MERN 应用程序，其中包含一个运行 Express 服务器的主包和一个包含 React 前端并拥有自己的包的客户端文件夹。为了测试客户端，我一直在使用 webpack-dev-server 在 client/public 文件夹中运行一个 HTML 文件，该文件链接了 dist 文件夹中的 Webpack 包。 HTML 文件：

<!DOCTYPE html>
<html>
  <head>
    <title>React Config</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="../dist/bundle.js"></script>
  </body>
</html>

bundle 的相对路径是正确的，并且使用 WDS 可以正常工作。但是，当我尝试通过我的 Express 服务器提供此文件时，我收到捆绑文件的 404 错误。在我的 server.js 中：

app.use(express.static('client'));

const appPage = path.join(__dirname, './client/public/index.html');

app.get('/', function(req, res) {
  res.sendFile(appPage);
});

这确实正确地提供了 HTML 文件，但是当我导航到本地服务器时，它试图在 http://localhost:3000/dist/bundle.js 找到 bundle.js，而不是 http://localhost:3000/client/dist/bundle.js。此外，即使我将 HTML 中的路径更改为指向正确的位置，它仍然是 404。

所以 2 个问题：

1) 我如何配置 Webpack 包的路径，使其既可以从客户端文件夹中运行的 WDS 访问，也可以从我的主包中的 Express 服务器访问？

2) 为什么即使我将路径更改为正确，Express 也找不到捆绑包？我已将整个客户端文件夹作为服务器的静态文件夹。

【问题讨论】：

标签： node.js express webpack webpack-dev-server

【解决方案1】：

你不应该将 webpack-dev-server 用于生产，webpack-dev-server 不构建 index.html 文件，webpack-dev-server 仅供开发者使用。

你可以使用这个命令来构建它：

webpack --config ./webpack.prod.js --mode production

【讨论】：

是的，我正在使用 WDS 开发客户端，但我还想确保服务器本身能够提供 HTML 文件。我最困惑的是为什么无论我给它什么路径，服务器都无法找到 webpack 包。据我了解，将客户端文件夹指定为静态应该可以访问该文件夹中的所有内容，包括捆绑包，但它似乎不起作用。