WebDesign Dackel

webpackで複数のディレクトリへ出力する

Hatena0
Google+0
Pocket0
Feedly0

最近、仕事でもプライベートでもwebpackを使う機会が少しずつ増えてきましたが、複数のエントリーファイルを扱う際に少し迷ったことがあったのでメモです。

具体的にどんなことで迷ったかといいますと、

.
└─src
  ├─app.js
  └─pages
    ├─products.js
    └─contact.js

こんなファイルを、

.
└─dist
  ├─app.js
  └─pages
    ├─products.js
    └─contact.js

こうしたい!
という内容です。(分かりづらいですね…!)

複数のページで読み込むJSが違う

SPAではなく通常の画面遷移で、それぞれの画面ごとに異なるJSファイルを読み込むことになると複数のエントリーファイルが必要になります。

そんな時、これまではwebpackの設定を下記のようにしていました。

module.exports =
  entry:
    app: "./src/app.js"
    contact: "./src/pages/contact.js"
    products: "./src/pages/products.js"

  output:
    path: "#{__dirname}/dist"
    filename: "[name].bundle.js"

  plugins:[
    new webpack.optimize.CommonsChunkPlugin "app.bundle.js"
  ]

これを実行すると、

.
└─dist
  ├─app.js
  ├─products.js
  └─contact.js

こんな感じで、全てのファイルが同じ階層でdistディレクトリの中へ出力されます。


最悪これでもいいのですが、各ページごとのファイルが入ったpagesの中身と、共通で使用するapp.jsが同じ階層になってしまうと、pagesの中身が増えた時に分かりづらくなってしまいます。

任意のディレクトリへ出力してみる

ちょっと試したところ、entryオプションに指定するオブジェクトの添字に、ディレクトリを含んだ文字列を指定することで期待する結果が得られました!

先ほどの設定を少しだけいじります。

webpack = require "webpack"

module.exports =
  entry:
    "app": "./src/app.js"
    "pages/contact": "./src/pages/contact.js"
    "pages/products": "./src/pages/products.js"

  output:
    path: "#{__dirname}/dist"
    filename: "[name].bundle.js"

  plugins:[
    new webpack.optimize.CommonsChunkPlugin "app.bundle.js"
  ]

実行してみると以下の様に、pagesの中身をそれぞれディレクトリを分けて出力することができました!

.
└─dist
  ├─app.js
  └─pages
    ├─products.js
    └─contact.js

重要なのが、output.filenameの値に[name]が使用されている点です。
この[name]という文字列部分にentryの添字が自動的に入ります。

entry.appを例にすると

output.filename = "pages/products.bundle.js"

この様な結果となり、output.pathからの相対パスとして出力させることが出来るみたいです。

他にも[hash][chunkhash]が使えたりします。詳しくはドキュメントを参照下さい。

configuration

まとめ

まとまりも無くだぁーっと書いてしまったので分かりづらいですね…。なので、重要そうな点だけ最後にまとめてみます。

  • entryに入れるオブジェクトの添字に直接パスを書く
  • output.filename[name]を使用する

出来ることの割にまだまだ使いこなせていないですが、webpackは使いはじめると本当に便利ですね。これからも少しずつ知見をためていきたいなぁ〜と思います。