Webpack5/webpack-dev-server如何配置根路径服务非index.html文件

webpack-dev-server 4.x 版本移除了3.x根级别的index配置项，直接沿用旧配置会触发配置校验报错，对应能力已拆分到不同配置模块下，针对访问根路径/返回自定义html文件、无默认index.html的场景，可通过以下两种方式实现同等效果：

方案1：通过historyApiFallback重写规则实现（推荐单页应用使用） #

直接在devServer配置中添加路由重写规则，无需调整原有html生成流程，配置示例：

const path = require('path');

module.exports = {
  // 其他webpack配置保持不变
  devServer: {
    // 原有其他devServer配置保留
    historyApiFallback: {
      rewrites: [
        // 精准匹配根路径/请求，返回指定html文件
        { from: /^\/$/, to: '/other_filename.html' }
      ]
    }
  }
}

扩展说明：如果项目存在前端路由，需要所有未匹配静态资源的路径都返回该html，可将重写规则调整为{ from: /./, to: '/other_filename.html' }，即可覆盖所有路由场景，避免子路由刷新404。

方案2：通过static模块的index配置实现（推荐纯静态站点使用） #

如果项目仅需静态服务默认首页替换为自定义文件，无前端路由需求，可直接在static静态资源配置项内指定index文件名，注意该配置不是根级别字段：

const path = require('path');

module.exports = {
  // 其他webpack配置保持不变
  devServer: {
    // 原有其他devServer配置保留
    static: {
      directory: path.join(__dirname, 'dist'), // 替换为实际存放构建产物/静态文件的目录
      index: 'other_filename.html' // 指定静态服务默认返回的首页文件
    }
  }
}

注意事项 #

如果项目使用html-webpack-plugin生成目标html文件，需保证插件的filename字段值与上述配置中填写的html文件名完全一致，否则会出现文件找不到的404问题。

内容的提问来源于stack exchange，提问作者Cragmorton