Webpackの「publicPath」は何をしますか？

250

Webpack docsoutput.publicPathは次のように述べています：

output.pathJavaScriptの観点から。

これが実際に何を意味するかについて詳しく説明していただけますか？

私はとを使用output.pathしoutput.filenameて、Webpackが結果を出力する場所を指定していますが、何を入力するoutput.publicPath必要があるか、またそれが必要かどうかはわかりません。

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: "What should I put here?"   
  } 
}
javascript  webpack 
— ミシャモロシコ
ソース
17
この質問に追加したいのですがpath、いつ使用し、いつ使用しpublicPathますか？
— wmock 2016年
1
— mqklin
— talabes
6
開発チームの誰かが目を覚ます必要があります。多くの人がこの質問をします
— Royi Namir
— Eliran Malka

回答:

133

output.path

すべての出力ファイルを保存するローカルディスクディレクトリ（絶対パス）。

例： path.join(__dirname, "build/")

Webpackはすべてをに出力します localdisk/path-to-your-project/build/

output.publicPath

バンドルファイルをアップロードした場所。（サーバーのルートに対して）

例： /assets/

アプリをサーバールートにデプロイしたと仮定しますhttp://server/。

を使用する/assets/と、アプリは次の場所でWebpackアセットを検索しますhttp://server/assets/。内部的には、webpackが遭遇するすべてのURLは " /assets/"で始まるように書き直されます。

src="picture.jpg" 書き直す➡ src="/assets/picture.jpg"

アクセス先：（http://server/assets/picture.jpg）

src="/img/picture.jpg" 書き直す➡ src="/assets/img/picture.jpg"

アクセス先：（http://server/assets/img/picture.jpg）

— ケビン・ロウ
ソース
65

ブラウザーで実行する場合、webpackは、生成されたバンドルをホストする場所を知る必要があります。したがって、追加のチャンク（コード分​​割を使用している場合）またはファイルローダーまたはURL ローダーを介してロードされた参照ファイルをそれぞれ要求できます。

例：生成されたバンドルをホストするようにhttpサーバーを構成する場合は、次のように/assets/記述します。publicPath: "/assets/"

— ヨハネス・エワルド
ソース
3
アセットフォルダの場所を教えていただけますか？アセットフォルダー内のファイルを確認してください。ありがとうございます。
— gauti 2018年
53

publicPathは開発目的でのみ使用されます、この構成プロパティを初めて見たときは混乱しましたが、しばらくの間Webpackを使用しているので、理にかなっています

すべてのjsソースファイルをsrcフォルダーの下に置き、ソースファイルをでdistフォルダーにビルドするようにWebpackを構成するとしますoutput.path。

しかし、静的アセットをのようなより意味のある場所に提供したいwebroot/public/assets場合はout.publicPath='/webroot/public/assets'、今度はを使用して、htmlでを使用してjsを参照できるようにします<script src="/webroot/public/assets/bundle.js"></script>。

リクエストwebroot/public/assets/bundle.jsするwebpack-dev-serverと、distフォルダーの下にjsが見つかります

更新：

チャーリー・マーティンが私の答えを訂正してくれてありがとう

オリジナル：publicPathは単に開発目的で使用され、これは開発目的だけではありません

いいえ、このオプションは開発サーバーで役立ちますが、本番環境でスクリプトバンドルを非同期で読み込むことを目的としています。非常に大きな単一ページアプリケーション（Facebookなど）があるとします。Facebookは、ホームページをロードするたびにすべてのJavaScriptを提供したくないので、ホームページで必要なものだけを提供します。次に、プロファイルにアクセスすると、ajaxを使用してそのページのJavaScriptがさらに読み込まれます。このオプションは、サーバー上でバンドルをロードする場所を指示します

— ショーン
ソース
1
これは単に開発目的のためだけではなく、@ jhnnsの答えはそれがローダー出力にどのように影響するかを説明しています。
— Wen
同じですよね？このプロパティは、ローダーとミドルウェアに実際のアセットの場所を通知します。本番環境ではwebpackmiddlewareやwebpack-dev-serverを使用しないことを期待しています。したがって、これは開発環境専用であると考えます。webpack.github
— Sean
1
このwebpack.github.io/docs/configuration.html#output-publicpathから、このオプションは、ミドルウェアだけでなく、生成されたファイルにアセットの正しいURLまたはパスを入力するようにwebpackに指示するようです。開発サーバーを実行しているとき、ミドルウェアはpublichPathリクエストをハイジャックしてインメモリファイルを返すようになっていると思います。
— Wen
正確には、本番環境ではwebpack -p、アセットを構築するためにを使用します。アセットは、webpackサーバーやwebpackミドルウェアではなく、アプリケーションサーバーまたはnginxサーバーによって提供される必要があるため、この構成は本番環境では使用できなくなります。 ？
— Sean
7
いいえ、このオプションは開発サーバーで役立ちますが、本番環境ではスクリプトバンドルを非同期で読み込むためのものです。非常に大きな単一ページアプリケーション（Facebookなど）があるとします。Facebookは、ホームページをロードするたびにすべてのJavaScriptを提供したくないので、ホームページで必要なものだけを提供します。次に、プロファイルにアクセスすると、そのページのJavaScriptがajaxで読み込まれます。このオプションは、サーバーのどこからバンドルをロードするかを指示します
— Charlie Martin
19

publicPathを使用して、webpack-dev-serverに「仮想」ファイルを提供する場所を指定できます。publicPathオプションは、webpack-dev-serverのcontent-buildオプションと同じ場所になります。 webpack-dev-serverは、起動時に使用する仮想ファイルを作成します。これらの仮想ファイルは、webpackが作成する実際のバンドルファイルに似ています。基本的には、--content-baseオプションがindex.htmlがあるディレクトリを指すようにする必要があります。設定例は次のとおりです。

//application directory structure
/app/
/build/
/build/index.html
/webpack.config.js


//webpack.config.js
var path = require("path");
module.exports = {
...
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/assets/",
    filename: "bundle.js"
  }
};  


//index.html
<!DOCTYPE>
<html>
...
<script src="assets/bundle.js"></script>
</html>

//starting a webpack-dev-server from the command line
$ webpack-dev-server --content-base build

webpack-dev-serverは、参照する仮想bundle.jsファイルとともに仮想アセットフォルダーを作成しました。これをテストするには、localhost：8080 / assets / bundle.jsにアクセスし、アプリケーションでこれらのファイルを確認します。これらは、webpack-dev-serverを実行したときにのみ生成されます。

— アイザック・パック
ソース
とても良い説明ですが、本番環境に移行するか、手動でビルド/build/bundle.jsを行う場合src、index.htmlファイル内のを変更する必要がありますか？
— ArchNoob 2017年
返事が遅くなってごめん。srcを変更する必要はありません。本番環境でも開発環境でも、webpackは出力パスにbundle.jsを作成します。上記の例では、/ build / bundle.jsになります。
— Isaac Pak
ありがとうsrc、index.htmlファイルの行についてお伺いします。現時点で"assets/bundle.js"は、バンドルが本番環境に移行するかどうかを示している"build/bundle.js"ため、html src行のをに変更する必要がありますsrc="build/bundle.js"。またはもっと自動化された方法はありますか？
— ArchNoob 2017
2
私はあなたの質問を理解しました。はい、本番環境ではsrcをbuild / bundle.jsに変更する必要があります。これを自動化する方法については、よくわかりません。他の人が2つの異なるwebpack.config.jsファイルを作成するのを見ました。1つは本番用、もう1つは開発用です。文法的にif（ENV === production）がこれを行う方法があると思われますが、私はまだ試していません。
— Isaac Pak 2017
@ArchNoobちょうど私がこれを本番環境でどのようにやっているのかを見出します。私はsrc値を変更しませんでしたが、代わりにpublicPath値をから/assets/に変更しました/build。これにより、index.htmlを変更する必要がなくなります。また、index.htmlをビルドフォルダーからアプリケーションのルートに移動しました。
— Isaac Pak
15

私の場合、私はcdnを持っており、処理したすべての静的ファイル（js、imgs、fonts ...）を私のcdnに配置します。URLがhttp://my.cdn.com/であるとします。

したがって、htmlの元の参照URLであるjsファイルが「./js/my.js」である場合、本番環境ではhttp://my.cdn.com/js/my.jsになります。

その場合、私がする必要があるのは 、publicpathをhttp://my.cdn.com/に設定することだけです。

— ケントウッド
ソース
私の場合、プレフィックスが追加されていないようです。
— Param Singh
14

filenameは、ビルドステップを実行した後に、バンドルされたすべてのコードが蓄積されるファイルの名前を指定します。

pathは、app.js（ファイル名）がディスクに保存される出力ディレクトリを指定します。出力ディレクトリがない場合、webpackがそのディレクトリを作成します。例えば：

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js"
  } 
}

これは、ディレクトリが作成されますMyProjectと/例/ distのをし、そのディレクトリの下にそれが作成されますapp.js、/myproject/examples/dist/app.jsを。ビルド後、myproject / examples / dist / app.jsを参照して、バンドルされたコードを確認できます

publicPath：「ここに何を入れればよいですか？」

publicPathは、バンドルファイルapp.jsが提供されるWebサーバーの仮想ディレクトリを指定します。publicPathを使用する場合のサーバーという単語は、webpack-dev-server、または高速サーバー、またはwebpackで使用できるその他のサーバーのいずれかです。

例えば

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: path.resolve("/public/assets/js")   
  } 
}

この構成は、すべてのjsファイルをexamples / dist / app.jsにバンドルし、そのファイルに書き込むようにwebpackに指示します。

publicPathは、webpack-dev-serverまたはExpressサーバーに、このバンドルされたファイル（examples / dist / app.js）をサーバー内の指定された仮想場所（/ public / assets / js）から提供するように指示します。したがって、htmlファイルでは、このファイルを次のように参照する必要があります。

<script src="public/assets/js/app.js"></script>

だから、要約すると、publicPathは間のマッピングのようなものですvirtual directory、あなたのサーバー内とoutput directoryoutput.path設定で指定され、ファイルの要求するたびに、公開/資産/ JSは/ app.js来て、/examples/dist/app.jsファイルが提供されます

— udeep shrestha
ソース
2
よく説明されました！
— Ganesh Pandey
3

webpack2のドキュメントでは、これをより明確に説明しています：https ://webpack.js.org/guides/public-path/#use-cases

webpackには非常に便利な構成があり、アプリケーションのすべてのアセットの基本パスを指定できます。これはpublicPathと呼ばれます。

— アラン
ソース
2

publicPathは、画像とフォントファイルを参照するためにcssで定義された相対パスを置き換えるためにwebpackによって使用されます。

— ハリドアザム
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.