web-dev-qa-db-ja.com

Webpackの "publicPath"は何をするのですか？

Webpackのドキュメント では、output.publicPathは次のように記述されています。

JavaScriptから見たoutput.path。

これが実際に何を意味するのか詳しく教えてください。

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

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: "What should I put here?"   
  } 
}
javascriptwebpack
208
Misha Moroshko

output.path

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

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

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

output.publicPath

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

例：/assets/

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

/assets/を使用することで、アプリはhttp://server/assets/でwebpackアセットを見つけます。内部では、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）

94
Kevin Law

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

たとえば、httpサーバーを生成したバンドルを/assets/の下にホストするように設定した場合は、次のように記述します。publicPath: "/assets/"

59
Johannes Ewald

publicPathは開発目的にのみ使用されます。、私はこのconfigプロパティを最初に見たときに混乱しましたが、私はしばらくの間webpackを使っていたので今では意味があります

すべてのjsソースファイルをsrcフォルダーに置き、output.pathを使用してソースファイルをdistフォルダーにビルドするようにWebパックを設定したとします。

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

webroot/public/assets/bundle.jsを要求すると、webpack-dev-serverはdistフォルダーの下にjsを見つけます。

更新：

私の答えを修正してくれたCharlie Martinに感謝

original：publicPathは開発目的でのみ使用されます。これは開発目的ではありません

いいえ、このオプションは開発サーバーでは役に立ちますが、その意図は本番環境でスクリプトバンドルを非同期にロードすることです。たとえばFacebookなど、非常に大きな単一ページのアプリケーションがあるとします。 Facebookは、ホームページをロードするたびにそのJavaScriptのすべてを提供したくないので、ホームページで必要なものだけを提供します。それから、あなたがあなたのプロフィールに行くとき、それはajaxでそのページのためにもう少しJavaScriptをロードします。このオプションはあなたのサーバーのどこからバンドルをロードするかを指示します。

48
Sean

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

//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を実行したときにのみ生成されます。

17
Isaac Pak

私の場合、私はCDNを持っている、そして私は私のCDNに私のすべての処理された静的ファイル（js、imgs、フォント...）を置くつもりです、URLが httpであると仮定します：/ /my.cdn.com/

そのため、HTMLの元の参照URLであるjsファイルが './js/my.js'である場合は、 http://my.cdn.com/js/myになります。実稼働環境では.js

その場合は、publicpathを http://my.cdn.com/ に設定するだけで、webpackが自動的にそのプレフィックスを追加します。

13
Kent Wood

Webpack2のドキュメントではこれをもっとわかりやすく説明しています。 https://webpack.js.org/guides/public-path/#use-cases

webpackはあなたのアプリケーションのすべてのアセットのためのベースパスを指定させる非常に便利な設定を持っています。それはpublicPathと呼ばれます。

3
Alan

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

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

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

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

publicPath： "ここに何を置くべきですか？"

publicPathは、バンドルされたファイルapp.jsが提供されるweb serverの仮想ディレクトリを指定します。 publicPathを使用する場合、Wordサーバーはwebpack-dev-serverまたはexpressサーバー、または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またはエクスプレスサーバーに、このバンドルファイルを提供するように指示します。つまり、examples/dist/app.jsの指定された仮想ロケーションからserverすなわち/ public/assets/js。したがって、htmlファイルでは、このファイルを次のように参照する必要があります。

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

要約すると、publicPathは、サーバーのvirtual directoryとoutput.path構成で指定されたoutput directoryの間のマッピングに似ています。ファイルpublic/assets/js/app.jsが来る、/ examples/dist/app.jsファイルが提供される

1
udeep shrestha

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

1
Khalid Azam