必要なリソースの依存関係を解決し、アセット(配布物)を生成するビルドツール(要するにコンパイラ)です。系、画像ファイルなどを扱うことができます。必要ありません!覚えるべきことはほとんどありません。コマンドを実行するだけです。webpackこれで、hoge.jsがscript.jsとして作成される。これを使うと簡易webサーバが立ち上げられるっぽい。webpack-dev-serverとしたらサーバが起動した。設定しないと、プロジェクトルートをwebルートにされました。"webpack-dev-server"},webpackの設定webpack.config.jsというファイルに設定を書き込む。webpack.config.jsを下記のようにして、webpackを実行するとできた。}};devServerのcontentBaseを指定すると、webpack-dev-serverのWEBルートが変更できる。ポートも変更できるらしい。Replacement(HMR)というのも便利そう。参考:http://webpack.github.io/docs/usage.htmlnativeのjavascript以外に対応させるためには、loaderというのを使うらしい。babelであれば、babel-loaderというのがある。babelをnpmでインストールしてから、webpack.config.jsに、下記を追加する。}]},testとかよくわからないけど、jsファイルはbabel-loader通す的な感じでしょうか?これによって、Reactとかも対応可能になるもよう。reactで試してみよう。参考:babelとwebpackを使ってES6でreactを動かすまでのチュートリアルmain.jsを下記のようにする。document.getElementById('example'));これでwebpackしたら、正常に動いた。あと、プラグインもあって、例えば、jsファイルの圧縮もある。webpack.config.jsの最初の行に下記を追加する。require('webpack');あと、webpack.config.jsに下記を追記する。するだけで、本番用になるので、圧縮してくれるらしい。スタイルシートもエントリーポイントのJSに組み込むらしい。style-loadercssをmain.jsに組み込む。loaderの設定を追加する。webpack.config.jsに下記を追加すると、importとかするときに、拡張子をつけなくてよくなる。'.css']},あと、webpack-dev-serverは、watchしてくれているらしい。ファイルを変更すると自動的に内部的にwebpackし、その結果をメモリ上に保存するらしい。ファイル自体は作成しない。webpack-dev-serverを利用しない場合は、webpackのwatch機能を利用したらしい。mapを作成してくれるものらしい。