如何通过Webpack将应用部署在指定路径？配置报错求助

碰到这种情况大概率是配置项之间不匹配或者路由 fallback 没设置好，我帮你梳理几个关键的修改点，照着调整应该就能解决：

• 确保output.publicPath和devServer.publicPath完全一致
  这两个配置是强关联的，devServer 的 publicPath 只是开发时的映射，真正的资源路径规则由 output.publicPath 定义，必须让两者保持相同，而且建议末尾加上斜杠（避免路径拼接出问题）。示例配置如下：

  module.exports = {
    output: {
      // 这里的路径决定了资源在浏览器中访问的根路径
      publicPath: '/bub/'
    },
    devServer: {
      // 开发服务器的资源访问路径要和output保持一致
      publicPath: '/bub/',
      port: 8080
      // 其他devServer配置...
    }
  }
  

• 配置devServer.historyApiFallback处理SPA路由（如果是单页应用）
  如果你开发的是单页应用（比如用React/Vue的路由），直接刷新localhost:8080/bub会因为服务器找不到对应文件而返回404。这时候需要设置路由 fallback，把所有/bub下的请求都指向你的入口HTML文件：

  devServer: {
    publicPath: '/bub/',
    historyApiFallback: {
      rewrites: [
        // 匹配所有/bub开头的请求，重定向到/bub/index.html
        { from: /^\/bub\/.*$/, to: '/bub/index.html' }
      ]
    }
  }
  

• 用html-webpack-plugin自动注入资源路径
  如果你手动在HTML里写了JS/CSS的引用路径，很容易出现路径错误。建议用html-webpack-plugin来自动生成入口HTML，它会根据publicPath自动拼接正确的资源路径，避免手动写错：

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    // ...其他配置
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html', // 你的原始HTML模板
        filename: 'index.html'
      })
    ]
  }
  

• 别忘了重启Webpack Dev Server
  所有配置修改后，必须关闭当前的dev server进程，重新启动才能让新配置生效——这步看似简单，但很多人会忽略导致配置不生效的错觉。

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