Webpackって何?

RequireJSと同じく、モジュール管理/バンドル化をしてくれるツール

AMD(RequireJSのやつ), CommonJS形式両対応
Jade、CoffeeScriptのローダーもある
コード分割(Code Spliting) ... 非同期でモジュールを読み込む機能
WatchしたりUglifyもしてくれる(Gruntとかぶってる)

Browserifyとの比較記事を見かけたがBrowserify使ったこと無いので良し悪しは分からず...

導入

npmからインストールする。gruntで使いたいので、grunt-webpackも。
coffee-loaderはWebpackでcoffeeから読み込むためのプラグイン　
(ちゃんとメモってなかったので間違ってたらごめんなさい)

$ npm install --save-dev webpack grunt-webpack coffee-loader

Gruntfile

Plugin使いたいのと、ファイルパス周りが特殊なので上の方でrequire

Gruntfile.coffee

path = require('path')
webpack = require('webpack')

タスク設定はこんな感じ
結構無理やりGruntから使えるようにしているようで、設定をoptionsに書き、Grunt的なfilesセクションは無視される。

(追記: 現在は、multitask化されているので、このままでは動きません。コメント参照)

Gruntfile.coffee

webpack:
  options:

    # 進捗どうですか
    progress: true

    # entryは複数書けるらしい。
    entry:
      bundle: 'entry.coffee'

    # .coffee拡張子のスクリプトは`coffee-loader`で読むように指定
    module:
      loaders: [
        { test: /\.coffee$/, loader: 'coffee-loader' }
      ],

    # output先を指定。 [name]などは適宜置換される [参照](http://webpack.github.io/docs/configuration.html#output-filename)
    output:
      path: path.join(__dirname, "www/static/js/")
      publicPath: 'www/static/js/'
      filename: '[name].js'
      chunkFilename: '[chunkhash].js'

    # ファイル名解決のための設定
    resolve:
      # 'src/coffee'にコードを入れているので、指定
      root: path.join(__dirname, 'src/coffee')

      # 探索するモジュール用ディレクトリを指定。デフォルトではbower_componentsは入っていない。 `moduleDirectories`とtypoしてて小一時間ハマった
      modulesDirectories: ['node_modules', 'bower_components']

      # .coffeeを省略できるようにする
      extensions: ['', '.coffee', '.webpack.js', '.web.js', '.js']


    # お便利プラグイン
    plugins: [
      # bowerのモジュールを読めるようにするために
      new webpack.ResolverPlugin([
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])
      ]),

      # 指定のモジュールを予めグローバル変数としておく(後述)
      new webpack.ProvidePlugin
        $: 'jquery'
        _: 'underscore'
        Backbone: 'backbone'
    ]

src/coffee/entry.coffee

AppRouter = Backbone.Router.extend
  routes:
    'home': 'home'

  home: ->
    require('pages/home').initialize()

new AppRouter();
Backbone.history.start {pushState: true}

src/coffee/pages/home.coffee

module.exports =
  initialize: ->
    console.log('homeだよー')

extensionsで.coffeeをしているので、require('pages/home')でpages/home.coffeeを読むようになる。

外部モジュール

bowerで管理しているコンポーネントを読めるように、resolveと、webpack.ResolverPlugin.DirectoryDescriptionFilePluginを設定する。
それだけだと

test.coffee

$ = require('jquery')

みたいな形で読み込むことになり面倒なので、上記を勝手に行うProviderPluginを導入している。

感想

最初はまったか？と思ったが、resolveまわりが頭に入ってきたらなんとかなった気がしてきた。Gruntとかぶってる点が多いのが気になる(小並感)

TODO

非同期読み込みを試す

参考

http://webpack.github.io/docs/configuration.html#resolve
https://github.com/webpack/webpack-with-common-libs
http://ameblo.jp/ca-1pixel/entry-11884453208.html

全部のせRequireJSっぽいWebpackを使ってみた。

Webpackって何?

導入

Gruntfile

外部モジュール

感想

TODO

参考