webpackとは何か整理する

モジュールバンドラ

複数のJavaScriptファイルをまとめるツール
Vue-Cli では、vue.config.jsファイルにconfigureWebpackオプションを指定して設定できる。

モジュールバンドラ以外でできること

「ローダー」「プラグイン」という機能があり、それらを使用すると下記のようなことができる。

• JavaScriptをトランスパイル
• Sassのコンパイル
• 画像の圧縮
• パフォーマンスの最適化

用語

モジュール

webpackでまとめるファイルのこと。下記のようなファイル。

• JavaScriptファイル
• CSS
• 画像

エントリポイント

webpackが解析を始めるファイル

バンドル

まとめられたファイル

ビルド

バンドルを出力するまでの一連の処理

ローダー

主にJavaScript以外のファイルをバンドルできるように変換するプログラムのこと。
下記のようなローダがある。

• babel-loader
• sass-loader
• post-css-loader

プラグイン

webpackでバンドルするときに機能を拡張するプログラムのこと。