webpack + Sass + file-loader のサンプル

webpackではCSS内の画像等を埋め込まずに外部参照として利用できます。srcフォルダーに画像を配置しておき、ビルドするとdistフォルダーにコピーされます。

css-loaderのurl: falseオプションと似ていますが、url: falseオプションはsrcフォルダーからdistフォルダーにファイルをコピーしません。

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

インストールコマンド

まずはpackage.jsonを作る。

npm init -y

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

npm i -D webpack webpack-cli sass css-loader sass-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フォルダーに成果物が出力されます。