別の基本パス（webpackとgithubpagesの設定）からコンテンツを提供するようにアプリを作る

Question

私は自分の問題のタイトルを思いつくのは簡単ではなかったので、質問のタイトルを明確にしようとします。

質問はWebpackとgithubpagesの設定に関連しています。

背景：私はgithub（https://github.com/SomePeaceStudio/manatelpa）でangular2でテストプロジェクトを作成しました。私はwebpackを使ってプロジェクトを構築し、それを生産のために醜くする方法をテストしていました。

問題：8080 /とすべてのコンテンツがローカルホストから正しくセットされている：私は、プロジェクトをビルドし、それを提供するローカル、ローカルホストから提供された8080/EX：

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

など...、それ魔法のように働く。

私はGH-ページへの私の「DIST」フォルダを押すと、分岐https://github.com/SomePeaceStudio/manatelpa/tree/gh-pages（私はプロジェクトのGH-ページを使用している）ので、私のページへのパスは次のようになります。この場合は 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/folder（common + prod）にあります。私はそれを修正する必要があります。

私はこの問題に対処する方法がわからない..私も、それはいくつかのグーグルを行う方法に正しくタイトルがわからない...

私は、コンテンツが私のindex.htmlにロードされているどのような方法を変更する必要がありますもしそれが強制的に私のすべてのコンテンツをbaseurl/manatelpa/..からロードするにはどうすればいいのでしょうか？私はいくつかのエレガントなソリューションを探しています。

webpackとghpagesの設定では、私は決してプロではありません。

Answer 1

ソリューションは簡単だった、私はWebPACKの出力オブジェクトに "publicPath" を変更する必要がありました： https://github.com/SomePeaceStudio/manatelpa/blob/a60070da7a0507bc2b6e3ce15b9bfd71df756649/config/webpack.prod.js#L14

をそして今、すべての私のファイルは、/ manatelpaの/から提供されています

publicPath: '/manatelpa/' 

私はここでそれを編集しました。 ..

素晴らしい！

また、Rishatに感謝の意を表します。

Answer 2

Webpackの設定とは関係ないと思います。何が本当に必要なのは、単に//manatelpa絶対パスを参照することになり、このような方法で、すべてのlinkとscript要素のsrc属性値を変更することです、そしてありません。

ので、基本的には、

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

のように見えるすべてがそれらすべてを正しく解決するために

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

のようになります。

のindex.htmlはWebPACKのによって生成された場合、output.publicPath WebPACKの設定を見てみましょう。