Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

webpackちゃんと理解しとこ 設定ファイル 編

More than 1 year has passed since last update.

※ これは古いWebpackの情報です。(どのバージョンの話か忘れるぐらいには古い)

ドキュメント読みながら書いていたものの、まとめかたとして不適切だったので中途半端になってます。

loader編 ← prev | next → わからなかった設定編

なんとなく設定ファイルことwebpackと開発者のインターフェースであると思うのでちゃんと抑えておく。
http://webpack.github.io/docs/configuration.html

くっそ多いので適当に上から読んで分割してく

CONFIGURATION OBJECT CONTENT

いきなりヒントに、pure json objectじゃなくてもいいって書いてある。
こういう小技は結構重要なきがする。

全部を読み終わって未だに分かってないこと一覧

  • chunk
  • entryに配列渡した時にexportされるもの
  • output.filenameのhashchunkhash
  • output.filenameに複数のsubstitutionを指定できるか
  • module.xxxContextXxx

気になった設定

この辺は実際に手を動かして別途確認したい。
- resolve
- externals
- profile
- debug
- node
- amd

まとめ

  • 多すぎて全項目書き起こすのはむだだったのであきらめた
  • 気になる項目はあとで実際に動かして確認する

ここから下は最初に書いてたentry〜outputまでのメモ。
長過ぎるし、基本的なことだからいらなかった。

entry

真っ先に実行されるべきjsファイルの定義。
オブジェクトで定義すると複数のjsを生成出来る。

  • 文字列を渡すと、そいつが起動時に読み込まれる
  • 配列を渡すと、起動時に全部読み込まれて最期の奴がexportされる。
    • このexportされるっていうのがどういうことかわかってない
  • オブジェクトを渡すと、複数のバンドルが生成される
    • keyがチャンク名で値には上記の文字列/配列を渡す

output

みたまんま出力に関する設定。複数のentryが定義されていてもoutput設定は一つ。

山程設定項目がある。

output.filename

そのまんま生成されるjsに付ける名前。
絶対パスを定義してはいけない だめ絶対(must not)
そういうのはoutput.pathでやる。

複数エントリーを定義しているとき

ファイル名に特定の文字列(substitutions)を埋め込むことで、別々のファイル名を付けることが出来る
- [name]
- [hash]
- [chunkhash]

hashchunkhashの違いがわからん。
hashはコンパイル毎、chunkhashはファイル毎かな?

別にfilename以外の設定でも使える。

output.publicPath

outputな設定というより、outputしたファイルの設定。
web上でのロケーションを表す。

コンパイル時に不明な場合は空のまま、処理されて実行時にエントリーポイントから__webpack_public_path__を通して設定出来るらしい。

output.chunkFilename

エントリーポイントではないchunkのファイルの名前。output.pathからの相対パス。
エントリーポイントじゃないchunkってどこで指定するんだろう。
CommonsChunkPluginとかかな?

ここでも代替文字列が使える
- [id]
- [name]
- [hash]
- [chunkhash]

output.sourceMapFilename

ソースマップをoutput.pathしたにどんな名前で出力するか?の定義。
デフォルトが[file].mapらしいけど、ソースマップは必ず出力されるのかな。
チュートリアルでは出てなかったような。

代替文字列一覧
- [file]
- [id]
- [hash]

output.devtool*

output.hotupdate*

output.jsonpFunction

すっとばした。

output.pathinfo

デバッグ用で、コンパイル後のソース中のrequireがもともと指定されていたパスがコメントされる。

output.library

output.libraryTarget

output.umdNamedDefine

ライブラリとしてbundleを作成する場合に指定する。設定郡。
npmモジュールがそのままbundleしたり、browserify出来る時代に必要な設定だろうか。

output.sourcePrefix

みたまんま

output.crossOriginLoading

以下を設定すると有効になる
- "anonymous"
- "output.crossOriginLoading"

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away