webpack + CSS with mini-css-extract-plugin のサンプル

CSSをwebpackで取り込みつつ、cssファイルを出力するサンプルです。 mini-css-extract-pluginの使い方を紹介します。

ゼロから環境構築する場合の手順

インストールコマンド

まずはpackage.jsonを作る。

npm init -y

その上で、必要なモジュールをインストールする。

npm i -D webpack webpack-cli css-loader mini-css-extract-plugin

webpack.config.js の書き方

webpack.config.jsのコードを参照ください。

webpackのデフォルト構成としているので、srcフォルダーにソースファイルを格納すること。デフォルトではエントリーポイントはsrc/index.jsである。

ビルドコマンド

npx webpack

distフォルダーに成果物が出力されます。