webpackが全く分からん
webpackが全く分からん
題そのままです。
VueやExpressで簡単にアプリ開発してましたが、如何せん初心者の域を脱却できないでいます。
特に理解できない、webpackについて書いていきます。
Node.jsの特性
昔々JavaScriptはブラウザでしか使用されない言語だったそうです。
それがJavaScriptだけでアプリ開発を行いたい欲望が生まれ、
ブラウザに留まらない広範囲な適用が求められました。
当時モジュールが読み込めない欠点をCommonJSが改善し、
CommonJSはmodule機能とサーバーサイドでも適用できるようになります。
そしてNode.jsを誕生し、爆発的ヒット。
Node.jsを使って様々なパッケージが開発され、それらを管理するためにnpmが活躍します。
ふむふむ...ここまでは分かるぞ...
Webpackの紹介が難しい
CommonJSで作られていたパッケージがどうやらサーバーサイドでは使用できたものの、
以前までのようにブラウザでは適用できない。これを可能にするためのビルドツールとして、
産み落とされた代表例がwebpackです。
Node.jsの歴史
うーん...
Node.jsでは可読性の向上や機能毎の開発などにより、
様々なJSファイルが散りばめられています。
- Expressで雛形を使った際によく見かけるpug(jade)やejs、hbs
- CSSを効率的よく書けるように拡張したSASS
- みんな大好きAngular、React、Vueなどのフレームワーク
- AltJS関連のCoffeeScript、TypeScript
これらのファイルも結局最後は一つのindex.jsにして、
HTMLファイルからまとめたindex.jsが読み込まれます。
つまり・・・
JSファイルで書かれた多数のモジュール関係を明確化して、
依存関係を綺麗にして、結果一つのファイル(=bundle)にまとめます。
このbundleを生成するまでをビルドとします。
このビルドをしてくれるツールの代表例がwebpackなのです。
繋がってきたぞ・・・！
webpackの機能
Webpackに中身でどんな役割・仕事をしているかを4つに分割して紹介。
Entry
Entryに指定したファイルを基準として依存関係が改善されます。
Entry以外のファイルを読み込む際に、Entryに合わせる為、
Entryが依存するファイルを読み込みます。
Loader
JavaScript以外のファイルもJSコンパイルして処理できます。
Plugin
ファイルをまとめる以外の処理をしてくれます。
cssやhtmlとして出力したり、JSファイルの圧縮など。
Output
まとめたJSファイル(=bundle)に関する出力先・方法。
結論
実際動かしてみないと本質的にはよう分からん。
