舊版本的webpack多頁(yè)面配置，按目錄訪(fǎng)問(wèn)，index.html必須手打出來(lái)么？

項(xiàng)目是一個(gè)老項(xiàng)目，先貼下webpack配套的開(kāi)發(fā)服務(wù)器配置

"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"

多頁(yè)面的HtmlWebpackPlugin的filename的配置是

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

開(kāi)發(fā)服務(wù)器起來(lái)之后，發(fā)現(xiàn)如果直接訪(fǎng)問(wèn)http://localhost:8080/page1是不行的，必須把后面的index.html手動(dòng)打上才能正常訪(fǎng)問(wèn)

單頁(yè)面的時(shí)候不存在這個(gè)問(wèn)題，index.html可以直接通過(guò)http://localhost:8080訪(fǎng)問(wèn)

新版本的webpack試了一下，是沒(méi)有問(wèn)題的，也可以直接通過(guò)http://localhost:8080/page1訪(fǎng)問(wèn)

因?yàn)榕f版本的webpack沒(méi)用過(guò)，所以搞不清楚是我的配置的原因，還是因?yàn)閣ebpack或者插件本身的原因？

回答

編輯回答

眼雜

就像題主說(shuō)的，你是多頁(yè)面的形式，所以輸出的dist肯定也是符合多頁(yè)面的組織形式

默認(rèn)情況下每個(gè)目錄的索引文件都是當(dāng)前路徑下的index.html文件

如果使用了WDS服務(wù)，你可以進(jìn)入http://localhost:8080/webpack-dev-server查看在內(nèi)存中生成的資源地址，我覺(jué)得是你資源地址沒(méi)生成，或者url不對(duì)

當(dāng)然，也提供另外的思路
你可以使用devServer.openPage配置項(xiàng)，直接設(shè)置默認(rèn)打開(kāi)的url(記得devServer.open:true)
高階一點(diǎn)的你就需要devServer.historyApiFallback的配置項(xiàng)
如配置成的配置項(xiàng)

{
    devServer: {
          historyApiFallback: {
                rewrites: [
                  {
                    // 不以`/`結(jié)尾的路徑和后邊不含資源后綴的路徑，均重寫(xiě)url
                    from: /^(\/.*)\/$/,
                    to: function (context) {
                      console.log('1', context.parsedUrl.href + 'index.html')
                      return context.parsedUrl.href + 'index.html'
                    }
                  },
                  {
                    // 不以`/`結(jié)尾的路徑和后邊不含資源后綴的路徑，均重寫(xiě)url
                    from: /^[^.]*$/,
                    to: function (context) {
                      console.log('2', context.parsedUrl.href + '/index.html')
            
                      return context.parsedUrl.href + '/index.html'
                    }
                  }
                ]
              },
    }
}

2017年8月23日 07:08

編輯回答

她愚我

問(wèn)題解決了，是webpack-dev-middleware中遺留的問(wèn)題，雖然沒(méi)找到issue，但現(xiàn)在基本上都建議用webpack-dev-server了。
樓上提醒了我用webpack-dev-server，問(wèn)題已經(jīng)解決了，可以直接通過(guò)page1/這種路徑去訪(fǎng)問(wèn)了。

2018年5月8日 13:41