旧版本的webpack多页面配置，按目录访问，index.html必须手打出来么？

Question

项目是一个老项目，先贴下webpack配套的开发服务器配置

"webpack": "^2.7.0",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"

多页面的HtmlWebpackPlugin的filename的配置是

page1: 'page1/index.html',
page2: 'page2/index.html'

开发服务器起来之后，发现如果直接访问http://localhost:8080/page1是不行的，必须把后面的index.html手动打上才能正常访问

单页面的时候不存在这个问题，index.html可以直接通过http://localhost:8080访问

新版本的webpack试了一下，是没有问题的，也可以直接通过http://localhost:8080/page1访问

因为旧版本的webpack没用过，所以搞不清楚是我的配置的原因，还是因为webpack或者插件本身的原因？

Answer 1

问题解决了，是webpack-dev-middleware中遗留的问题，虽然没找到issue，但现在基本上都建议用webpack-dev-server了。
楼上提醒了我用webpack-dev-server，问题已经解决了，可以直接通过page1/这种路径去访问了。

Answer 2

就像题主说的，你是多页面的形式，所以输出的dist肯定也是符合多页面的组织形式

默认情况下每个目录的索引文件都是当前路径下的index.html文件

如果使用了WDS服务，你可以进入http://localhost:8080/webpack-dev-server查看在内存中生成的资源地址，我觉得是你资源地址没生成，或者url不对

当然，也提供另外的思路
你可以使用devServer.openPage配置项，直接设置默认打开的url(记得devServer.open:true)
高阶一点的你就需要devServer.historyApiFallback的配置项
如配置成的配置项

{
    devServer: {
          historyApiFallback: {
                rewrites: [
                  {
                    // 不以`/`结尾的路径和后边不含资源后缀的路径，均重写url
                    from: /^(\/.*)\/$/,
                    to: function (context) {
                      console.log('1', context.parsedUrl.href + 'index.html')
                      return context.parsedUrl.href + 'index.html'
                    }
                  },
                  {
                    // 不以`/`结尾的路径和后边不含资源后缀的路径，均重写url
                    from: /^[^.]*$/,
                    to: function (context) {
                      console.log('2', context.parsedUrl.href + '/index.html')
            
                      return context.parsedUrl.href + '/index.html'
                    }
                  }
                ]
              },
    }
}