如何让webpack dev server添加斜线？

Question

我希望webpack dev server可以在所有没有斜杠的资源请求后附加一个斜杠。例如：
我的索引位于/my/project/root/index.html，我可以通过webpack dev server访问它：
1. /my/project/root 和
2. /my/project/root/（注意这里的斜杠）
我希望将1的请求重定向到2。
我已尝试使用historyAPIFallback选项，但是你提供给该选项的重写只会传递请求，而不会更改URL。
是否可能使用webpack dev server重定向请求？

- Andy F

---

你在这方面有任何进展吗？我也遇到了同样的问题。 - DILP

@DILP，很遗憾不能。最终，我通过在项目构建中添加一些额外的代码来解决这个问题，如果没有尾随斜杠，则会将重定向添加到初始请求中。我将其包装在一个条件中，并使用webpackDefinePlugin和tree shaking从生产构建中删除它。 - Andy F

Answer 1

您可以利用webpack的devServer.historyApiFallback和connect-history-api-fallback来添加尾随斜杠。

webpack.config.js

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      rewrites: [{ from: /^.*[^/]$/, to: (context) => `${context.parsedUrl.pathname}/` }],
    },
  },
};

在哪里

rewrites: [{ from: /^.*[^/]$/, to: (context) => `${context.parsedUrl.pathname}/` }]

表示将斜杠附加到任何没有斜杠的 URL 后面。

此外，还有一个包含以下属性的上下文对象：

parsedUrl: Information about the URL as provided by the URL module's url.parse.
match: An Array of matched results as provided by String.match(...).
request: The HTTP request object.

注意：如果你的webpack.output.publicPath是auto或者/，上面的答案可能会在网页上抛出CANNOT GET <URL>错误。这种情况下，只需执行以下操作：

rewrites: [{ from: /^.*[^/]$/, to: '/' }]

- icecoffee