匹配 webpack-dev-server 历史记录中的根路由ApiFallback'

Question

演示该问题的示例回购就在这里。

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

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

使用create-react-app，并基于webpack-dev-server的选项，我设置了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-config:

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似乎是一个更大的问题。这让我推荐了一种替代设置，它将适用于dev和生产(或部署在任何地方)。

几个选项：

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

尝试

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

• 请求/时显示landing.html
• 请求/subpage时显示subpage.html
• 在特定路径显示React应用程序，如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)将返回一个空白页面，但包含来自app.html页面的HTML，而没有注入绑定的<script>标记。所以，也许你可以找到解决这最后一个障碍的方法。