概要
webpackはloader覚えゲー、plugin覚えゲーなところがあるのでよく使いそうなパッケージを紹介します。
ちなみにドキュメントはこちらです。（いっぱいあります）
https://webpack.js.org/loaders
https://webpack.js.org/plugins
webpack
webpack本体です。
webpack-cli
webpackをコマンドラインで実行するのに必要です。
webpack-dev-server
開発用サーバーを立てるツールです。
babel-loader
babelを使うのに必要です。
ts-loader
typescriptを使うのに必要です。
url-loader
画像などのファイルを扱うのに必要です。
小さいファイルの場合はDataUrlに変換されます。
css-loader
cssを扱うのに必要ですが、単体ではスタイルの適用まではできません。
style-loader
読み込んだcssをstyleタグとして挿入します。
jsが実行されるまでスタイルは適用されないので注意が必要です。
mini-css-extract-plugin
読み込んだcssをcssファイルとして出力します。
cssファイルとして出力するので、js実行前にスタイルを読み込むことができます。
html-webpack-plugin
jsなどを読み込むタグをhtmlに自動挿入してくれます。
特にビルド後のファイル名にハッシュ値を付けてる場合は便利です。
clean-webpack-plugin
ビルド先のディレクトリを掃除してくれます。
optimize-css-assets-webpack-plugin
cssのminifyに必要です。
terser-webpack-plugin
jsのminifyに必要です。
webpack4ではデフォルトで使用されます。