#はじめに
こんにちは〜
最近フロントエンドの環境構築の勉強でwebpackを利用しました。
その際、プラグイン多いな！！！
と感じたので、自分なりにプラグインをまとめてみました！

#そもそもwebpackって？
コンポーネント化が進む時代・・・build時に各種ファイルを1つにバンドルしてくれるプリプロセッサがwebpackです。

公式の画像がわかりやすいので添付します。

このように、webpackが依存関係も込でいい感じにファイルを1つにまとめてくれます。
あとは、バンドルしてくれたファイルを読み込めば解決になります。

素晴らしいですね！

このバンドル時に数々あるプラグインを利用することでより便利になりますので、今回はそちらを紹介いたします。

#プラグイン一覧

プラグイン名	プラグインの特徴
webpack	webpackを使えるようにするためにとりあえずInstallする
webpack-cli	開発者がカスタムwebpackプロジェクトをセットアップする際の速度を上げるための柔軟なコマンドセットを提供
html-loader	webpack用のhtmlローダーモジュール
css-loader	webpack用のcssローダーモジュール
file-loader	webpack用のfileローダーモジュール
html-webpack-plugin	バンドルを読み込んだ HTML を出力するプラグイン
mini-css-extract-plugin	バンドルされる CSS を別の CSS ファイルに抽出する
optimize-css-assets-webpack-plugin	CSS を最適化するプラグイン
webpack-merge	設定をマージする関数
terser-webpack-plugin	JavaScritpt を圧縮するプラグイン
@babel/core	Babelを利用できるようにする
@babel/preset-env	対応ブウラウザなどの大雑把な情報を元に、必要なプラグインを自動で選択して、最新の ES6+ を動く状態にしてくれる
autoprefixer	バンドルする際にベンダープレフィックスを設定する
babel-loader	babelをwebpackで利用できるようにする
clean-webpack-plugin	build時に利用していないファイルを削除してくれる

ざっとこんな感じです。
本当に便利なプラグインが多いですね。。。
他にも使えそうなプラグインがあったり、便利な書き方があったりしたので、次回の機会にアウトプットしようと思います。

ありがとうございました。