vue-cliでどうやってbuildされるのか
vue-cliとは？
vue-cliはwebpackを利用して設定などを出力してくれる雛形作成ツール
内部でcli-serviceというライブラリを使っている
→ これがwebpackをラップして使いやすくしてくれている
webpackは拡張仕事にプラグインに渡すことで「前処理」的なことをしてくれている
.vueファイルは、jsでそのまま読み込める形に変換する必要があり、それをvue-loaderというwebpackのプラグインがやってくれている
処理後のファイルは build.js で、.vueファイルはjsのオブジェクトに変換される
→ その後、webpackで他のjsライブラリとまとめて1つのファイルが作成される
なるほど、webpackについて理解する必要がありそう。。。
webpackについて
webpackの用途
- pug, haml, ejsのようなテンプレートエンジンのコンパイル
- sassなどのcssプリプロセッサのプリコンパイル
- TypeScriptのようなAltJsのトランスコンパイル
- Linterを用いたjsの構文チェック
- Angulaer,React,Vueのようなjsフレームワークの実行
webpackとは？
JSの静的モジュールバンドラー
モジュールに分割され、別々になったJSファイルの依存関係を解決して、1つのファイルにまとめるツールの総称
モジュールバンドラーが登場したことによって、複数のjsファイルをまとめ htmlは1つのファイルを読み込むだけでよくなる
webpackはモジュールバンドラー
webpackの4つの基本要素
- Entry
- Output
- Loader
- Plugins
Entry
JSをバンドルする上で、どのファイルを基準として依存関係を解決するかを指定
エントリーには複数ファイルを指定できる
エントリーポイントを指定するとwebpackはエントリーポイントで指定したファイルが依存する他のモジュールとライブラリを読み込んでくれる
Output
webpackがまとめたファイルを「どこ」に「どのような名前」で出力するかを指定します。
Loader
webpack自体はJSしか理解できない。Loaderを使用することで、JS以外のファイルをモジュールに変換して処理を行える。
設定ファイルには「ファイル名」と「適用する処理内容」を記述する
Plugins
ファイルを纏める以外のタスク（カスタムタスク）の実行ができる
流れ
Entry → Loaders → Plugins → Output
webpackと似た仕組み
Gulp
GRUNT
npm script
PARCEL
...etc
gulpはタスクランナー
web制作で自動化したい処理を定義し、自動的に実行するのが目的
続きは今度
webpackを軽く理解したところで、vue-cliの構成ファイルを見ていく