2015JavaScriptwebpackで複数のディレクトリへ出力するTipswebpackTwitter0Facebook0Hatena0Google+0Pocket0Feedly0最近、仕事でもプライベートでもwebpackを使う機会が少しずつ増えてきましたが、複数のエントリーファイルを扱う際に少し迷ったことがあったのでメモです。└─contact.jsこうしたい!という内容です。(分かりづらいですね...!)複数のページで読み込むJSが違うSPAではなく通常の画面遷移で、それぞれの画面ごとに異なるJSファイルを読み込むことになると複数のエントリーファイルが必要になります。そんな時、これまではwebpackの設定を下記のようにしていました。└─contact.jsこんな感じで、全てのファイルが同じ階層でdistディレクトリの中へ出力されます。最悪これでもいいのですが、各ページごとのファイルが入ったpagesの中身と、共通で使用するapp.jsが同じ階層になってしまうと、pagesの中身が増えた時に分かりづらくなってしまいます。任意のディレクトリへ出力してみるちょっと試したところ、entryオプションに指定するオブジェクトの添字に、ディレクトリを含んだ文字列を指定することで期待する結果が得られました!先ほどの設定を少しだけいじります。└─contact.js重要なのが、output.filenameの値に[name]が使用されている点です。この[name]という文字列部分にentryの添字が自動的に入ります。"pages/products.bundle.js"この様な結果となり、output.pathからの相対パスとして出力させることが出来るみたいです。他にも[hash]と[chunkhash]が使えたりします。詳しくはドキュメントを参照下さい。configurationまとめまとまりも無くだぁーっと書いてしまったので分かりづらいですね...。重要そうな点だけ最後にまとめてみます。entryに入れるオブジェクトの添字に直接パスを書くoutput.filenameに[name]を使用する出来ることの割にまだまだ使いこなせていないですが、webpackは使いはじめると本当に便利ですね。これからも少しずつ知見をためていきたいなぁ〜と思います。この記事のコメントメールアドレスが公開されることはありません。お気軽にコメントどうぞ。コメントをキャンセル渋谷でWebサイトを作っています。ちなみに、「ダッケル」はドイツ語でダックスフンドの事だそうです。