update.はじめにwebpackが流行ってきているようなので、がんばって使ってみます。流れが早すぎておじさんには辛いです。webpackを使うのでreact.jsを使ってみます。webpackとはjsの依存関係を解決して、複数のjsファイルを1つに結合してくれるビルドツールです。大規模なアプリケーションを開発する際に、力を発揮しそうです。◎gulpなどで結合するのとの違いgulpなどでjsファイルを結合する際は、読み込み順を気にする必要がありますが、webpackの場合、requireした箇所でモジュールを読み込んでくれるので順番を気にする必要が無いようです。www/dist/bundle.jswww配下にdist/bundle.jsが作成されます。index.htmlをブラウザで開くとアラートが表示されます。webpack.config.jsを使う毎回コマンドを打つのは初心者の私には辛いので設定ファイル(webpack.config.js)を使います。webpackコマンド実行時のディレクトリ内に、webpack.config.jsがあった場合自動的に読み込んでくれます。webpackbundle.jsがwww/dist/配下に作成されます。bowerと連携するreact.jsなど必要なライブラリをbowerに管理します。webpackと連携するには少しだけ手間が必要です。]}ただし上記の方法だが、少し問題があり、ResolverPlugin.DirectoryDescriptionFilePluginを使用すると読み込むライブラリのbower.jsonのmainが配列の場合読み込めなくなる。◎解決方法bower-webpack-pluginを使用する。これでmainが配列の場合も問題なく読み込むことができる。BowerWebpackPlugin()]}gulpを使ってビルドする。gulpタスクの中でwebpackを使うにはgulp-webpackが必要です。gulp-webpackをまずはインストールします。追記naru0504さんよりコメント頂ましたので修正点追記します。gulp-webpackは最新版はwebpack-streamと名前を変えている。gulp-webpackだとビルドした際にwarningがでるのでwebpack-streamに移行したほうがよい。webpackを実行する。設定はwebpack.config.jsを利用。buildでwebpackを実行できるようになりました。main.jsx◎jsx-loaderをインストールwebpackで、JSXをコンパイルするには。jsx-loaderが必要となる為、インストールします。--save-devwebpack.confing.jsのmodule.loadersで、jsx-loaderを読み込む。'jsx-loader?harmony'のharmonyオプションを追加することで、ES6の仕様の一部を使うことができるようになります。2externals詳しくは下記を参照webpackのconfiguration#externalswebpackによって解決されるべきではない依存関係を指定しますが、生成されたバンドルの依存関係になります。意味がわからなかったが、webpackのコンパイルに含めないものを定義するようです。react.jsをhtml側ですでに読み込んでいる場合、ビルドに含める必要がないのでexternalsに追加します。document.getElementById('content'));こちらの状態でビルドしてみたところ、下記のエラーが発生した。functionv0.14でビルドする場合に発生しているが、原因がわからなかった。v0.13インストールし直しでビルドしてみる。build今回はエラーが発生せず、下記の画面が表示された。v0.14.xでビルドした際のバグはbower-webpack-pluginのバグの可能性有りwebpackはnpmでのパッケージ管理を推奨している為、bowerではなく、なるべくnpmを使用したほうがいいかもしれない終わり画面を表示するだけで大変でした。それぞれの使い方について理解する必要があります。sato@nogsonへっぽこWEBデザイナーです。upLoginユーザーは見つかりませんでした。