webpack-dev-server 的选项 devServer.index 的用例是什么答案

【问题标题】：what's the use case of webpack-dev-server's option devServer.indexwebpack-dev-server 的选项 devServer.index 的用例是什么
【发布时间】：2019-07-18 01:54:31
【问题描述】：

我只是不知道选项devServer.index的用例是什么。

我认为对此选项的更改将反映在 devServer.historyApiFallback 选项中，但在我启动开发服务器（将 devServer.index 设置为'demo.html'）后，控制台告诉我'404s 将回退到 /index .html'，而不是 '/demo.html'。

在谷歌上搜索了几分钟后，我没有找到任何此选项的示例。

任何人都可以解释并举例以便更好地理解吗？谢谢。

【问题讨论】：

标签： webpack webpack-dev-server

【解决方案1】：

结论： devServer.index 配置与目录访问规则无关，除了devServer.publicPath指定的目录。

解释： 开发服务器对目录请求的响应如何由服务器本身确定，我猜每次您从静态服务资源访问目录时，开发服务器都会在该文件夹下使用索引文件（例如 index.html）响应您。 但是，更改选项 devServer.index 不会影响此规则。它只影响选项 devServer.publicPath 指定的目录。 默认情况下，dev-server 不会为 publicPath 下的目录的请求找到索引文件，并会给出 404 响应。将 devServer.index 更改为值 'index.html' 后，服务器将在其请求的文件夹下使用文件 'index.html' 响应这些请求。这就是这个选项的用例。

提示：

提供的选项值都将被视为相对路径（server-relative 不可用），相对于 devServer.publicPath。
您可以指定任何类型的文件，而不仅仅是 html。

如有错误请指正，谢谢。

【讨论】：

【解决方案2】：

称我为陷入泥潭的笨蛋，但我从小就将我的 HTML 文件称为 index.htm，所以现在不得不为 webpack 创建一个 index.html，这让我心碎。所以，在花了几个小时试图修复它之后，我终于看到了这篇文章，就在之后，还有这个错误报告：

https://github.com/webpack/webpack-dev-server/issues/2540

所有的结果是，如果你想使用 webpack 开发服务器更改作为公共目录中索引的文件的名称，请执行以下操作：

  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    hotOnly: true,
    staticOptions: { index: 'index.htm' }
  },

注意staticOptions: { index: 'index.htm' }。这就是魔法发生的地方。

也就是说，我同意，devServer.index 属性似乎什么都不做。但它绝对应该做的事情是可能的。唷。

【讨论】：