如何让webpack dev server识别客户端设备类型并返回不同HTML？

没问题，这个需求完全可以通过Webpack Dev Server的URL重写功能搞定，我之前做过类似的配置，给你详细拆解一下实现思路和代码：

核心思路就是利用historyApiFallback.rewrites配置，通过请求头里的User-Agent字段判断用户的设备类型，然后动态返回对应的HTML文件。

具体配置代码 #

在你的Webpack配置文件（比如webpack.config.js或者单独的devServer配置文件）里，修改devServer部分如下：

const path = require('path');

module.exports = {
  // 其他Webpack配置（entry、output等）...
  devServer: {
    // 确保静态资源目录指向你的HTML文件存放位置，比如public文件夹
    static: {
      directory: path.join(__dirname, 'public'),
    },
    historyApiFallback: {
      // 禁用点号规则，避免带点的路径（比如静态资源）被错误重写
      disableDotRule: true,
      rewrites: [
        // 处理根路径请求
        {
          from: /^\/$/,
          to: (context) => {
            // 获取请求头中的User-Agent
            const userAgent = context.headers['user-agent'] || '';
            // 正则判断是否为移动端设备（可根据需求扩展正则）
            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
            // 返回对应HTML文件路径
            return isMobile ? '/mobile_index.html' : '/index.html';
          }
        },
        // 处理所有其他路由（适配React Router等单页应用路由）
        {
          from: /./,
          to: (context) => {
            const userAgent = context.headers['user-agent'] || '';
            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
            return isMobile ? '/mobile_index.html' : '/index.html';
          }
        }
      ]
    }
  }
};

关键配置说明 #

• disableDotRule: true：必须开启这个选项，否则带有点号的路径（比如/static/js/main.js这类静态资源）会被错误地应用重写规则，导致资源加载失败。
• UA判断逻辑：这里用的是比较通用的移动端User-Agent正则，覆盖了常见的移动设备，你可以根据业务需求添加更多设备的匹配规则。
• 双规则配置：第一个规则处理根路径/，第二个规则处理所有其他路径，确保用户访问任何路由时都能根据设备返回对应的HTML文件，适配React Router这类单页应用的路由机制。

注意事项 #

• 确保index.html和mobile_index.html都放在你配置的静态资源目录下（比如示例中的public文件夹），否则Webpack Dev Server找不到这些文件。
• 这个配置只适用于开发环境，生产环境部署时，你需要把这套UA判断逻辑转移到你的服务器上（比如Nginx、Apache）。比如Nginx可以通过$http_user_agent变量结合if指令来实现相同的效果。
• 如果你的移动端页面有独立的资源打包需求，还需要在Webpack中配置多入口，分别打包桌面端和移动端的资源，然后对应引入到各自的HTML文件中。

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