Question

因此，我一直在使用运行Express服务器的主程序包和包含React前端并拥有自己程序包的客户端文件夹配置MERN应用程序。为了测试客户端，我一直在使用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>

该包的相对路径是正确的，并且使用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文件，但是当我导航到本地服务器时，它试图在bundle.js而不是http://localhost:3000/dist/bundle.js上找到http://localhost:3000/client/dist/bundle.js。此外，即使我将HTML中的路径更改为指向正确的位置，也无论如何它都是404。

有2个问题：

1）如何配置Webpack捆绑包的路径，使其可从客户端文件夹中运行的WDS和主程序包中的Express服务器访问？

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

Answer 1

您不应使用 webpack-dev-server 进行生产， webpack-dev-server 不能构建index.html文件， webpack-dev-server 仅适用于开发人员。

您可以使用以下命令来构建它：

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

Express找不到Webpack捆绑包

1 个答案: