はじめに
こんにちは〜
最近フロントエンドの環境構築の勉強で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時に利用していないファイルを削除してくれる |
ざっとこんな感じです。
本当に便利なプラグインが多いですね。。。
他にも使えそうなプラグインがあったり、便利な書き方があったりしたので、次回の機会にアウトプットしようと思います。
ありがとうございました。