Webpack编译及本地服务器运行异常问题求助

结合你使用的webpack 1.13.3和webpack-dev-server 1.16.2版本，以及你遇到的问题，我梳理了几个关键修复点：

1. 修正contentBase的路径错误 #

你配置里的contentBase: './dist+/public'存在语法问题，这里的+是多余的字符，webpack-dev-server会把它当成路径的一部分，导致无法识别正确的静态资源目录。请改成实际的文件路径，比如你的静态资源放在dist/public目录下，配置应调整为：

devServer: {
  inline: true,
  contentBase: './dist/public', // 移除多余的+符号
  port: 3000,
  devtool: 'eval',
  hot: true,
  historyApiFallback: true
}

这个配置是告诉dev-server从哪个目录提供静态文件，路径错误会直接影响资源加载和404回退逻辑。

2. 适配webpack-dev-server 1.x的historyApiFallback配置 #

在webpack-dev-server 1.x版本中，仅设置historyApiFallback: true有时无法正确识别子目录下的index.html。如果你的index.html在dist/public目录下，建议明确指定回退页面的路径：

devServer: {
  inline: true,
  contentBase: './dist/public',
  port: 3000,
  devtool: 'eval',
  hot: true,
  historyApiFallback: {
    index: '/index.html' // 明确指定回退的目标页面
  }
}

3. 确认文件结构与配置匹配 #

请确保你的项目文件结构和配置对应，示例结构如下：

项目根目录
├── dist
│   └── public
│       ├── index.html
│       └── 打包后的js/css资源
├── webpack.config.js
└── 其他源码文件

如果index.html的实际位置不同，要同步调整contentBase和historyApiFallback.index的路径。

4. 重启dev-server生效配置 #

修改配置后，务必完全停止当前运行的webpack-dev-server进程，再重新启动——老版本的dev-server不会自动热加载配置变更，不重启的话新配置不会生效。

完成以上调整后，再访问localhost:3000/details应该就能正常加载页面了。如果还是有问题，建议检查前端路由（比如React Router、Vue Router）是否正确配置了/details的路由规则，确保前端能接管该路径的渲染。

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