reactjs - 匹配 webpack-dev-server 的 historyApiFallback 中的根路由

Question

演示问题的示例 repo 在这里。

我正在尝试设置 webpack 开发服务器，以便：

1. 请求/由public/landing.html（静态登录页面）提供服务
2. 我的 React 应用程序处理对任何其他内容的请求

使用create-react-app, 并基于webpack-dev-server's options，我设置webpackDevServer.config.js如下：

historyApiFallback: { // Paths with dots should still use the history fallback. // See https://github.com/facebookincubator/create-react-app/issues/387. disableDotRule: true, rewrites: [ // shows views/landing.html as the landing page { from: /^\/$/, to: 'landing.html' }, // shows views/subpage.html for all routes starting with /subpage { from: /^\/subpage/, to: 'subpage.html' }, // shows views/404.html on all other pages { from: /./, to: '404.html' }, ], },

当我启动 webpack 时，我看到的是：

• 请求/subpage被正确路由到subpage.html
• 请求/foo正确路由到404.html。最终，这些将由我的 React 应用程序处理。
• 请求/被错误地路由到我的 React 应用程序。

我怎样才能landing.html回应请求/？

Answer 1

我最终打开了一个错误请求，webpack-dev-middleware发现它不是错误，而是配置失败。

具体来说，问题在于HtmlWebpackPlugin与historyApiFallback. 我相信插件是在正则表达式匹配之前处理的，HtmlWebpackPlugin默认文件输出是index.html; 这意味着开箱即用，/将始终路由到HtmlWebpackPlugin输出文件。

解决这个问题的方法是在 中设置一个自定义文件名HtmlWebpackPlugin，这样您就可以再次控制匹配。这是一个演示修复的示例 repo，这是 webpack 配置：

module.exports = {
  context: __dirname,
  entry: [
    './app.js',
  ],
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  devServer: {
    publicPath: "/",
    // contentBase: "./public",
    // hot: true,
    historyApiFallback: {
      // disableDotRule: true,
      rewrites: [
        { from: /^\/$/, to: '/public/index.html' },
        { from: /^\/foo/, to: '/public/foo.html' },
        { from: /(.*)/, to: '/test.html' },
      ],
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Html Webpack html",
      hash: true,
      filename: 'test.html',
      template: 'public/plugin.html',
    }),
  ],
};

Answer 2

想到了两个想法：

1. Webpack Dev Server 无法实现您想要做的事情（据我所知）
2. 而且，一旦npm run build运行和部署，部署的应用程序将不会遵循 Webpack Dev Server 中配置的相同规则

即使我在#1 上弄错了，如果您打算部署应用程序，#2 似乎是一个更大的问题。这导致我推荐一种替代设置，该设置将适用于开发和生产（或任何部署的地方）。

几个选项：

• 将应用程序设置为单页应用程序 (SPA) 并使用 React Router 提供静态路由 ( /and /subpage) 和通配符 (其他所有内容)
• 设置节点（或另一台服务器）为静态路由（/和/subpage）和通配符（其他所有内容）提供服务

一次尝试

在尝试设置路线时，我能够实现此设置：

• 请求landing.html时显示/
• 请求subpage.html时显示/subpage
• 在特定路径显示 React App，例如app.html

为此，请进行以下更改：

1. 移至/public/index.html_/public/app.html

   mv ./public/index.html ./public/app.html
   

2. 在/config/webpackDevServer.config.js中，更新historyApiFallback为：

   historyApiFallback: {
     // Paths with dots should still use the history fallback.
     // See https://github.com/facebookincubator/create-react-app/issues/387.
     disableDotRule: true,
     rewrites: [
       // shows views/landing.html as the landing page
       { from: /^\/$/, to: "landing.html" },
       // shows views/subpage.html for all routes starting with /subpage
       { from: /^\/subpage/, to: "subpage.html" },
       // shows views/app.html on all other pages
       // but doesn't work for routes other than app.html
       { from: /./, to: "app.html" }
     ]
   }
   

3. /config/paths.js更新至appHTML：

   appHtml: resolveApp("public/app.html")
   

4. 在/config/webpack.config.dev.js, update插件中包括：

   new HtmlWebpackPlugin({
     filename: "app.html",
     inject: true,
     template: paths.appHtml
   })
   

请求一个随机 URL，就像localhost:3000/foo将返回一个空白页面，但包含页面中的 HTML，而没有注入app.html捆绑的标签。<script>所以也许你可以找到解决这个最后障碍的办法。