如何配置webpack dev server将无后缀文件以text/html类型提供服务

原因说明 #

webpack-dev-middleware 5.x 依赖的mime-types库默认对无扩展名的文件返回application/octet-stream，且mimeTypes配置项仅支持带扩展名的映射规则，所以你尝试的空字符串、null等配置均无法命中无后缀文件。

可行解决方案 #

方案1：自定义devServer中间件强制修改响应头 #

适配webpack 5 + devServer v4+ 版本，直接在请求返回前给无后缀的GET请求设置正确的Content-Type，无需改动原有HtmlWebpackPlugin配置，侵入性最低：

// vue.config.js 或 webpack.config.js
module.exports = {
  // 其他原有配置保持不变
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      devServer.app.use((req, res, next) => {
        // 排除带.的静态资源（如js、css、图片等），仅匹配无后缀路径
        if (!req.path.includes('.') && req.method === 'GET') {
          res.setHeader('Content-Type', 'text/html; charset=utf-8')
        }
        next()
      })
      return middlewares
    }
  }
}

如果你使用的devServer版本低于v4，将setupMiddlewares替换为onBeforeSetupMiddleware即可，逻辑一致。

方案2：调整生成文件名+路由重写规则 #

更贴合原生静态资源处理逻辑，稳定性更高：

1. 先修改HtmlWebpackPlugin配置，把生成的文件名加上.html后缀：

new HtmlWebpackPlugin(
  {
    // 其他原有配置保持不变
    filename: 'region.html'
  }
)

2. 配置devServer的路由重写，将无后缀的访问路径映射到对应的html文件：

devServer: {
  historyApiFallback: {
    rewrites: [
      { from: /^\/region$/, to: '/region.html' },
      // 多页场景可批量添加规则，或通过正则匹配统一处理
    ]
  }
}

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