babelとwebpack
babel
超簡単に言うとJavaScriptのコードを新しい書き方から古い書き方へと変換するツール。
JavaScriptは頻繁に言語仕様が変化していて、最新の書き方をすると一部のブラウザしかその仕様に対応していないと言う状況がよくある。 最新のECMAScript構文やJSX構文で書いても、それを古い構文に変換して最新の言語仕様に対応していないブラウザに読み込めるように古い構文の形式へ変換してあげる（フォールバックしたコードへの変換）役割をするのがbabel。
webpack
超簡単に言うと 複数のファイル(.jsや.css等)を一つのファイルにまとめて出力するツール。いわゆるバンドラー。 標準のwebpackはjsファイルしか束ねられないので、他のファイルを束ねる時は対応したローダーを設定に記載して使う。 例えばtxtファイルも束ねたい時はraw-loaderを使う。
また、最新のJavaScript構文を使うとwebpackでは解釈できない可能性がありその場合ビルドに失敗する。 そこでbabel-loaderを使い、babelを事前に実行する。
拡張機能設定
- loader
- 読み込むファイルに対して実行する。babel-loader等
- plug-in
- バンドルされた出力ファイルに対して実行する UglifyJsPlugin（ファイルの圧縮）、HtmlWebPackPlugin(bundel.jsが読み込まれた雛形htmlの生成)等。
webpac-dev-server
webpack開発用のローカルサーバー機能を提供するライブラリ。
