Webpack Dev Server访问localhost显示文件目录问题求助

嘿，我懂你的困扰——启动dev server后默认跳转到文件目录列表，得手动点build文件夹才能打开index.html，还得保留现有目录结构方便后续添加多个HTML文件。结合你的Webpack 4.8.3配置，给你两个关键调整就能搞定：

1. 配置Dev Server的默认访问路径 #

你的devServer配置里没指定默认打开的页面，也没正确设置内容根目录，导致dev server找不到默认入口页面，只能显示目录结构。修改devServer部分：

devServer: {
  overlay: true,
  contentBase: path.resolve(__dirname, './'), // 指定项目根目录作为内容基础
  openPage: 'build/index.html' // 启动后默认打开这个页面
}

这样启动dev server时，会直接跳转到http://localhost:8080/build/index.html，同时你依然可以通过访问根目录查看完整文件结构。

2. 调整HtmlWebpackPlugin的输出路径 #

你当前的HtmlWebpackPlugin配置中，filename设为index.html，意味着打包后index.html会生成在dist根目录，但你需要它在build目录下。修改这部分：

new HtmlWebpackPlugin({
  filename: "build/index.html", // 输出到build目录下
  template: "build/index.html",
  hash: true,
  chunks: ["index"]
})

这样webpack打包时，会把index.html生成到dist/build目录下，和你期望的目录结构保持一致，dev server也能正确映射到这个文件。

完整修改后的关键配置片段 #

把两处修改整合到你的webpack.config.js里，核心部分如下：

const path = require("path");
// ...其他依赖引入

let conf = {
  // ...entry、output等配置
  devServer: {
    overlay:true,
    contentBase: path.resolve(__dirname, './'),
    openPage: 'build/index.html'
  },
  // ...module配置
  plugins: [
    new ExtractTextPlugin({ filename:"[name].css" }),
    new HtmlWebpackPlugin({
      filename:"build/index.html",
      template:"build/index.html",
      hash:true,
      chunks:["index"]
    }),
    // ...其他plugins
  ]
};
// ...mode判断部分

调整完成后，启动webpack-dev-server会直接打开build/index.html页面，同时你依然可以通过访问http://localhost:8080/查看完整文件目录结构，完全满足你保留多HTML文件目录结构的需求。

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