はのフロントエンド入門記事第三回は "webpack" 編です。 昨今の Web フロントエンド開発では避けて通れない感のあるツールです。
こんな記事書いといて/避けて通れないとか言っといてアレですが、最近は No configuration bundler 的なものが流行ってきてるのでそっちを使うのも手です。 Webpackの設定めんどくさい地獄、Webpackよく分からなくてフロントエンド入門できない地獄から抜けられるかもしれません。たぶん。
Poi は No configuration bundler とはまた違う枠かもしれない。が入門レベルだったら No config で色々やってくれそうなので入れてみました。
そもそも webpack ってなに
At its core, webpack is a static module bundler for modern JavaScript applications.
https://webpack.js.org/concepts/webpack.js.org
モダン JavaScript アプリケーション用静的モジュールバンドラ、だそうです。
といってもあんまりピンとこないので、具体的に何をしてくれるのかを見たほうが早そうです。 webpack が何をしてくれるのかは公式サイトのトップページを見るとわかりやすいです。
モダンなJSアプリアプリケーションでは、コードを分割して export や import を駆使して（？）アプリケーションを構成していきます。
JSに限った話ではないですが、それなりの規模のアプリを開発しようと思ったらコードの分割やインポートなどはごくごく当たり前のように行います。
が、そもそも JS という言語自体がそのあたりの分割、管理が苦手な言語というのもあり、何らかの形で支援をしてあげないとなかなかアプリ開発がしにくい、という問題があったりしました。
あと Web, HTTP 1.1 の特性的にあまりファイルを分割し過ぎるとアプリのロードに時間がかかってしまうなどの問題もあり、 どちらかというとコードは極力まとめて配信したい、という事情もあったりしました。
（最近のJSやHTTP 2.0はこのあたりの弱点をある程度解決している…はず？なので過去形です）
なので、 適度にコードは分割して記述管理し、最終的にはそれを統合して配信したい…というようなことをしたくなります。 これをやってくれるのが webpack をはじめとする module bundler と呼ばれるツールです。
次回は
Babelとかちょっと思ってましたがわざわざ一記事使って書くことかどうか微妙だったので保留。 もうReactの話とかしても平気なのかな…？
このあたりの詳しい話は以下の記事がかなり丁寧で分かりやすかったのでおすすめです。
どうやってつかうの
何はともあれインストールしましょう。
npm install --save-dev webpack
インストールしたら使っていきます…と言いたかったのですが、真面目に使い方を書くと結構それだけで記事がふくらんでしんどいので、公式サイトに丸投げします。
ざっくりとした使い方は以下。
1. エントリポイントになるJSファイルを用意する (index.js 的な)
このエントリポイントを起点としてバンドルが行われます。 エントリポイントのファイル内で読み込まれているまた別のソースなども全部辿っていって、それらコード内の依存関係を解決してくれます。
2. コードを書く
あとは好きに（？）コードを書いていきます。
3. バンドルする
ひとしきりコードを書いたら Webpack の出番です。
npx webpack src/index.js dist/bundle.js
第一引数がエントリポイントの JS、第二引数がバンドルされた JS の出力先です。
実行してバンドルが成功したら dist/bundle.js にバンドルされた JS コードができているはずです。
4. バンドルされたコードを読み込んで利用する
Webpack はバンドラなので、バンドルした後のことは気にしてくれません。自分でちゃんと読み込んであげる必要があります。
バンドルされた JS コードをHTML上で読み込んであげます。これは通常の JS を読み込むときと同じ。 head 内かどこか適当なところで
<script src="bundle.js"></script>
みたいな感じで読み込みましょう。これで依存関係が解決された JS コードが読み込まれます。やったね。
これだけならかんたんでは？
そうです、簡単です。これだけなら。
実際はこれに Babel など各種ローダと呼ばれる類のものを入れて、色々設定を書いていく必要がでてきます。
Babel いわゆるトランスパイラ、 ES6 などのブラウザ側サポートがまだ万全でない JS コードを ES5 の文法に書き直してくれるようなものです。 これがないとWebアプリとして動かすのはだいぶ無理があるので、ほぼ必須のツールになってくる気がします。
それ以外にも SCSS を使うためのローダ、画像ファイルをいい感じに読み込むローダ、など、色々な追加機能をローダで入れていくことができます。
本格的なアプリケーションを開発しようとすると、様々な種類のファイルに対してそれぞれ適切な設定をする必要があるので、 Webpack の設定ファイルが複雑になっていき、 モダンJSに入門しようとした人を絶望の淵へと叩き落としてくれます。
基本は上記で書いた「いい感じに必要な依存関係を解決してバンドルしてくれる」ものなので、とりあえずそれをおさえておけば Webpack は怖くない、はず。 駄目なら No configuration に逃げてもいいかもしれません。どこまでよしなにしてくれるのか分かりませんが…
