Webpack4下如何配置dev-server指定非输出根目录的index.html？

针对你的场景，核心是要让dev-server正确指向documentation/index.html作为入口，同时确保文档内的相对资源引用和Webpack生成的资源路径匹配。下面是经过验证的配置方案：

完整devServer配置 #

devServer: {
  contentBase: path.resolve(__dirname, 'dist'),
  historyApiFallback: {
    index: '/documentation/index.html'
  },
  open: '/documentation/index.html', // 可选，启动dev-server时自动打开文档页面
  publicPath: '/'
}

关键配置解析及问题排查 #

我们来逐个拆解这些配置的作用，以及你之前尝试的方案为什么没生效：

• contentBase: path.resolve(__dirname, 'dist')
  这一步是告诉dev-server，静态资源的根目录是你的dist文件夹，这样它能正确找到documentation下的HTML和里面引用的资源。你之前说contentBase无效果，大概率是因为没有配合historyApiFallback一起使用——单独设置它只会指定静态资源目录，但不会修改默认的入口路径。

• historyApiFallback: { index: '/documentation/index.html' }
  这个是解决核心问题的关键：当dev-server默认查找根目录的index.html失败时，会自动 fallback 到你指定的这个路径。之前单独设置historyApiFallback.index无效果，是因为没通过contentBase告诉dev-server去哪里找这个文件，两者配合才能准确定位到正确入口。

• publicPath: '/'
  保持这个默认值即可，它确保Webpack生成的资源（比如production/scripts/flabbergastor.js）会以根路径为基准引用，和你文档里的相对路径（比如../production/scripts/flabbergastor.js）完美匹配，不会出现资源404的问题。

• open: '/documentation/index.html'
  这是个可选配置，能让dev-server启动后自动打开文档页面，不用手动在浏览器里输入路径。

额外注意事项 #

• 你已经正确设置了HtmlWebpackPlugin的filename为documentation/index.html，Webpack会将编译后的文档HTML输出到对应位置，这一步无需调整。
• 文档内的资源引用要坚持使用相对路径，比如样式库的CSS要写成../production/styles/flabbergastor.css，这样无论是在dev-server环境还是生产环境的静态文件中，路径都能正确解析。

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