旧版本的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'

                    }

                  }

                ]

              },

    }

}