Edited at

webpack周りでよく使いそうなパッケージを紹介


概要

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ではデフォルトで使用されます。