Webpack-dev-server historyApiFallback 重写子域答案

【问题标题】：Webpack-dev-server historyApiFallback rewriting subdomainsWebpack-dev-server historyApiFallback 重写子域
【发布时间】：2020-09-28 06:27:41
【问题描述】：

我正在创建一个包含多个独立子页面的 React 应用程序。我目前有一个独立的“登陆页面”、“菜单页面”和“菜单页面”（后两者有时可能会合二为一）。我正在使用 webpack 捆绑我的页面和 webpack 开发服务器以进行本地开发。菜单页面使用 react-router 来进行导航。这是我的 webpack 设置以便更好地理解：

{
  entry: {
    menus: path.resolve(__dirname, "src", "client", "menus.jsx"),
    landing: path.resolve(__dirname, "src", "client", "landing.jsx"),
    menu: path.resolve(__dirname, "src", "client", "menu.jsx"),
  },
  output: {
    path: path.join(__dirname, outputDirectory),
    filename: "[name].bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react", "@babel/preset-env"],
          },
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpg|woff|woff2|eot|ttf|svg)$/,
        loader: "url-loader?limit=100000",
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"],
  },
  devServer: {
    port: 3000,
    open: true,
    historyApiFallback: {
      verbose: true,
      index: "/landing.html",
      rewrites: [
        { from: /^\/menus/, to: "/menus.html" },
        { from: /^\/menu/, to: "/menu.html" },
        { from: /^\/menu\//, to: "/menu.html" },
      ],
    },
    proxy: {
      "/api": "http://localhost:8080",
    },
  },
  plugins: [
    new CleanWebpackPlugin([outputDirectory]),
    new HtmlWebpackPlugin({
      template: "./src/client/index.html",
      chunks: ["menus"],
      filename: "menus.html",
    }),
    new HtmlWebpackPlugin({
      template: "./src/client/index.html",
      chunks: ["landing"],
      filename: "landing.html",
    }),
    new HtmlWebpackPlugin({
      template: "./src/client/index.html",
      chunks: ["menu"],
      filename: "menu.html",
    }),
  ],
}

我的问题是，当我导航到 /menu/orders 时，historyApiFallback 会显示以下日志：

Rewriting GET /menu/preview to /menu.html
Rewriting GET /menu/menu.bundle.js to /menu.html

第一次重写是我所期望的，但是第二次让我感到困惑。首先，它为什么要尝试获取/menu/menu.bundle.js？其次，如果我有一个“。”，为什么要重写路线？在路线上？最后，我怎样才能让它工作，以便/menu/preview 与/menu 完全相同？

这是我的 ./src/client/index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Locameal</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
  </head>

  <body>
    <div id="app"></div>
  </body>

</html>

还有./src/client/menu.jsx

import React from "react";
import { render } from "react-dom";
import Menu from "./views/Menu";
import { BrowserRouter } from "react-router-dom";

render(
  <BrowserRouter>
    <Menu />
  </BrowserRouter>,
  document.getElementById("app")
);

【问题讨论】：

你能发布你的./src/client/index.html吗？
更新索引和菜单文件@udnisap

标签： reactjs webpack react-router webpack-dev-server

【解决方案1】：

您可以提供一个正则表达式，以便将所有带有 menu/* 的路由重定向到 menu.html，这样当您位于 /menu/preview 时，它就不会尝试从 /menu/ 解析捆绑包

{ from: /^\/menu\/.*$/, to: "/menu.html" }

查看connect-history-api-fallback的文档了解更多详情

【讨论】：

【解决方案2】：

您可能想尝试添加

output: {
  publicPath: "/",
}

到你的 webpack 配置。

有关更多上下文，请参阅this 答案。

【讨论】：