webpack-dev-server 使用 historyApiFallback 服务多个 html 页面

Question

我有一个使用 angular 2 和 webpack 构建的项目，我想在这个项目中有两个应用程序。

问题是我不知道如何使用 "historyApiFallback" 将不同的 url 映射到不同的入口点（HTML 页面）。

项目结构如下：

front/
--app.component.ts
--main.ts
--index.html
admin/
--app.component.ts
--main.ts
--index.html

bundle后的输出结果是这样的：

/dist
--index.html
--admin.html
--index.app.js
--admin.app.js

只有一个应用程序和 historyApiFallback 设置为 true，我可以让“/hero/1”、“/hero-list”或“/abc/def/ghi”指向 index.html。

我应该怎么做才能让所有内容都以“/admin”开头，例如：“/admin/edit-hero/1”指向 admin.html，每隔一个 url 指向 index.html ??

Answer 1

您可以将选项传递给 historyApiFallback 而不是布尔值。

这样的事情可能会有所帮助：

historyApiFallback: {
    rewrites: [
        { from: /^\/admin\/.*$/, to: 'admin.html'}
    ]
}

默认仍会重定向到 index.html。

查看 connect-history-api-fallback 库，webpack-dev-server 依赖于它的 historyApiFallback 实现。