webpackって、何だ？
引用しますが、この説明が分かりやすそうに思います。
qiita.com
・npm : Node.js側のライブラリ（開発ツール）の管理
・Bower : フロントエンド側のライブラリの管理
・Gulp : タスクランナー
・Webpack : モジュールバンドラー。フロントエンドのJSファイル生成。
Webpackは自分で書いたJSとライブラリとして読み込んでいるJSを一つのJSファイルに
まとめてくれます。
また、JSライブラリで読み込む必要があるCSSファイルたちもJSにまとめてくれます。（私達が書くCSSもまとめることが可能です。）
そして、それらのCSSで読み込む画像ファイルもDataURI(Base64形式)に変換してJSファイルに
まとめてくれます。つまり、JS、CSS、画像ファイルを一つのJSファイルにまとめてくれます。
なるほど、それで最後にbundle.jsというのを作るわけね。
HTML側から呼ぶファイルも、もちろん1つだけ
と、なるようです。
こうやってまとめていくようです。
qiita.com
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'sample.js'
}
};
entryは、バンドルの起点となるファイル名です。（パスを含む）
outputは、出力情報です。
output.pathは、出力フォルダの名前です。（パスを含む）
output.filenameは、出力ファイル名です。
こんな感じの書き方なんですね。
上記Qiitaの画像リンクを貼りますが、出力されたファイルの先頭の方に/*******/みたいのがたくさん入っているのは、バンドルされた後のファイルなんでしょうね。
さて、調べていると次のようなHtmlWebpackPluginみたいなものが見つかるので、きっとwebpackはjsだけでなくhtmlもバンドルしてくれるのでしょうね。
var webpack = require('webpack');
var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');・・・ということは、このプログラムを解析したければ、バンドルされる前のhtmlとjsを見れば良いわけだ。
バンドルされた後のソースコードは、とても見づらい気がします。
webpackを少しだけ読めた方が良い気もしますね。
qiita.com
- Entry ... ビルドを始める開始点
- Output ... ビルドの出力先
- Loaders ... webpack自身はJavaScriptしか理解できませんが、Loaderを使うことによってJavaScript以外のものも処理できるようになるらしい
- Plugins ... この説明では分からないが、ここにHtmlWebpackPluginとかが書かれるんだよな・・・
次の説明によると、
nansystem.com
html-webpack-pluginとはwebpackのプラグインで、webpackで生成したJavaScriptやCSSを埋め込んだHTMLを生成する。
webpackで生成したJavaScriptやCSSにユニークな識別子を付与することでブラウザキャッシュを回避したり、テンプレートとなるHTMLをカスタマイズすることができる。
とのことで、js以外のもの、とくにhtmlなどをバンドルできるプラグインは、ここで定義する感じかな。
そもそもなんでwebpackなんて使うんだろう？どうみても読みづらくなる気がするんだけど・・・と思っていたら見つけたのがこれ。
www.webprofessional.jp
webpackを使ってアセットをバンドルすることで、HTTPリクエストの回数を削減し、ファイルサイズを縮小できます。Webサイトをもっと快適にするためのチュートリアルです。
webpackを使う理由
主な理由は、サーバーへのHTTPリクエストの回数を減らすためです。Webページが大きくなると、jQuery、フォント、プラグイン、各種スタイルシート、自作のJavaScriptなどをインクルードします。アセット1つ1つのためにネットワークリクエストを出すと、リクエスト回数が膨張しWebページが重くなります。上記のアセットすべてを1つのバンドルにまとめることで、問題を解決します。
・・・なるほどね。これなら納得します。
