Webpack4 History API Fallback兼容性问题：地址栏路径访问异常求助

你遇到的这个问题，核心是Webpack 4迁移后，history-api-fallback在处理多级子路径的服务器端请求时配置不到位——内部路由跳转正常是因为那是客户端路由在接管，而地址栏直接访问会触发真实的服务器请求，这时候就需要dev-server正确把这些请求重定向到入口index.html。

我给你几个针对性的解决方案：

1. 配置正确的publicPath #

这是最关键的一步！如果你的应用部署在$myapp子路径下，必须把webpack.config.js里的publicPath设置为'/myapp/'（注意前后都要有斜杠）。Webpack 4默认的publicPath是'/'，如果你的应用不在根目录，这个默认值会导致页面的JS、CSS等资源加载路径错误，直接引发页面异常。

在配置文件中添加：

module.exports = {
  // ...其他配置项
  output: {
    // 其他output相关配置
    publicPath: '/myapp/'
  }
};

2. 完善historyApiFallback的重写规则 #

只靠命令行的--history-api-fallback参数在Webpack 4里可能不足以处理多级子路径，最好手动配置devServer的historyApiFallback选项，明确指定重写规则：

module.exports = {
  // ...其他配置
  devServer: {
    historyApiFallback: {
      rewrites: [
        // 匹配所有以/myapp/开头的多级路径，重定向到对应的index.html
        { from: /^\/myapp\/.*/, to: '/myapp/index.html' },
        // 处理根路径的请求（如果有需要的话）
        { from: /^\/$/, to: '/myapp/index.html' }
      ]
    },
    host: '0.0.0.0',
    mode: 'development'
  }
};

这样配置后，不管你访问$myapp/a/b还是$myapp/a/b/c，dev-server都会把这些请求重定向到/myapp/index.html，交给客户端路由去处理后续逻辑。

3. 简化启动命令 #

既然已经在配置文件里设置了host和mode，启动命令可以简化为：

webpack-dev-server

如果还是想保留命令行参数，确保和配置文件的设置不冲突即可。

问题根源说明 #

内部的history跳转完全在客户端处理，不会触发新的服务器请求，所以能正常工作。但地址栏直接访问多级路径时，浏览器会向dev-server发送真实的GET请求，这些路径都是客户端路由定义的，不存在对应的服务器文件，没有正确的重写规则的话，dev-server就会返回404或者加载异常。Webpack 4对history-api-fallback的默认处理逻辑和Webpack 3有差异，因此需要更明确的配置才能覆盖多级路径场景。

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