使应用程序提供来自不同基本路径的内容（webpack 和 githubpages 配置）

Question

我会尝试澄清问题标题，因为为我的问题想出标题并不容易。

问题与 Webpack 和 github 页面配置更相关。

背景：我在 github(https://github.com/SomePeaceStudio/manatelpa) 上用 angular2 做了测试项目。我正在测试如何使用 webpack 构建项目，然后将其 uglify 用于生产。

问题：当我在本地构建项目并提供服务时，从 localhost:8080/ 提供服务并且所有内容都从 localhost:8080/ 正确加载，例如：

GET localhost:8080/index.html
GET localhost:8080/app.js
GET localhost:8080/angular.png

等等..它就像一个魔法。

当我将我的 'dist' 文件夹推送到 gh-pages 分支 https://github.com/SomePeaceStudio/manatelpa/tree/gh-pages（我正在使用 gh-pages 进行项目）时，我的页面路径将是： https://somepeacestudio.github.io/manatelpa/ 在这种情况下，它从

加载 index.html

GET https://somepeacestudio.github.io/manatelpa/

但它试图从

获取我项目的其余部分

GET https://somepeacestudio.github.io/app.bb10406340c613a712e4.css [HTTP/1.1 404 Not Found 46ms]
GET https://somepeacestudio.github.io/polyfills.bb10406340c613a712e4.js [HTTP/1.1 404 Not Found 44ms]
GET https://somepeacestudio.github.io/vendor.bb10406340c613a712e4.js [HTTP/1.1 404 Not Found 32ms]
GET https://somepeacestudio.github.io/app.bb10406340c613a712e4.js [HTTP/1.1 404 Not Found 67ms]
GET https://somepeacestudio.github.io/vendor.bb10406340c613a712e4.js [HTTP/1.1 404 Not Found 43ms]
GET https://somepeacestudio.github.io/app.bb10406340c613a712e4.js

而不是来自：

https://somepeacestudio.github.io/manatelpa/.....

难怪找不到它，我不知道该怎么办，所有 webpack 构建配置都在 config/ 文件夹中（common + prod）。我需要修复它。

我不知道如何处理这个问题..我什至不知道如何正确地命名它来做一些谷歌搜索..

我是否应该更改 index.html 页面上内容的加载方式（它会自动执行），如果是的话，如何强制它从 baseurl/manatelpa/.. 加载我的所有内容。我正在寻找一些优雅的解决方案，如果有的话。

我绝对不是 webpack 和 ghpages 配置的专家。

Answer 1

我相信这与 Webpack 配置没有任何关系。您真正需要的是更改每个 link 和 script 元素的 src 属性值，以便引用 /manatelpa 绝对路径，而不仅仅是 /.

所以，基本上，所有看起来像的东西

<link href="/app.bb10406340c613a712e4.css" rel="stylesheet">

应该看起来像

<link href="/manatelpa/app.bb10406340c613a712e4.css" rel="stylesheet">

使它们都正确解析。

如果 index.html 是由 Webpack 生成的，请查看 output.publicPath Webpack 设置。

Answer 2

解决方案很简单，我必须在 webpack 输出对象中更改 "publicPath"：

    publicPath: '/manatelpa/'

我在这里编辑了它： https://github.com/SomePeaceStudio/manatelpa/blob/a60070da7a0507bc2b6e3ce15b9bfd71df756649/config/webpack.prod.js#L14

现在我的所有文件都来自 /manatelpa/...

太棒了！

另外，感谢 Rishat 的建议。

使应用程序提供来自不同基本路径的内容（webpack 和 githubpages 配置）

Making app to serve content from different base path (webpack and githubpages configurations)

github-pages

webpack

html-webpack-plugin

angular