webpack + CSS のサンプル

プレーンなCSSをwebpackで取り込むサンプルです。

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

インストールコマンド

まずはpackage.jsonを作る。

npm init -y

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

npm i -D webpack webpack-cli css-loader style-loader

webpack.config.js の書き方

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

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

ビルドコマンド

npx webpack

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

このフォルダーをダウンロードしてきてから構築する手順

インストールコマンド

npm i

ビルドコマンド

package.jsonにビルドを書いているので、これを使うのがオススメ。

npm run build

もしくは、npxコマンドを使ってもOK。

npx webpack

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