srcディレクトリ内の.coffeeファイルをdistディレクトリにコンパイルbowerパッケージをrequire出来るように今回使用したファイルGitHubへあげているので、興味がある方はご確認下さい。作業するディレクトリに移動して新規プロジェクトを作っていきます。npmとbowerの初期化を実行。#同じく全てEntergulpfileとHTMLなどを作成します。src/app.coffeeここまでで下記の様なファイル構成になっています。webpack.config.coffee必要なパッケージをインストール下記コマンドを実行してパッケージをインストールしていきます。bower-webpack-plugin一部、必ず必要という訳ではないものが含まれますが、インストールしたパッケージは以下です。先ほど作成したgulpfile.coffeeに下記の様なタスクを用意しておきます。"webpack"ここではwebpack.config.coffeeに設定を書いていくことを想定していますが、ファイルが増えるのがイヤダー!という場合は、webpackタスクの部分を下記の様にも書けます。"./dist/"webpackの設定webpack.config.coffeeを編集していきます。]}これで、coffee-scriptのコンパイルと、bowerのパッケージをrequireするための準備が整いました。Qiita全部のせRequireJSっぽいWebpackを使ってみた。とある地味なブログちょこっと寄り道gulp-webpackを使ったサンプルなどで、gulp-webpackとwebpackの両方をインストールしているのを見たことがあるのですが、バージョンが1.1.0以降の場合は下記のようにしてwebpackを参照することが出来るようになっています。$.webpack.webpackgulp-webpackbowerのパッケージをインストールしてrequireしてみる早速パッケージをインストールしていきます。jQueryと、jp-prefectureという、前に作った都道府県を扱うライブラリをこっそり入れてみます。"jp-prefecture"これで下記のコマンドを実行するとdist/app.jsが出来上がるようになっています。webpackファイルの変更で自動的にコンパイルするには下記を実行。gulp簡単なサンプルを作成ちょっとした動作確認をしていきたいと思います。ファイルを編集する前に、ファイルの変更を監視しておきます。result実行してみたサンプルです。動作サンプルなんの意味も無いサンプルですが、無事に動かせるところまで出来ました。まとめwebpackでは出来る事がたくさんあり、まだまだわからないことばかりです。やった方が良いよ!という箇所などありましたらご教授頂けたらとおもいます。更新履歴2015.06.15最初はDirectoryDescriptionFilePluginプラグインを使って、bower_components内のモジュールを読んでいましたが、そうすると、bower.jsonでmain属性が配列担っている時に読めない場合があるので、bower-webpack-pluginを使って読み込むように変更しました。この記事のコメントメールアドレスが公開されることはありません。お気軽にコメントどうぞ。コメントをキャンセル渋谷でWebサイトを作っています。ちなみに、「ダッケル」はドイツ語でダックスフンドの事だそうです。