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

webpackではアセットを取り込むことができます。 CSS内の画像等を埋め込んだり、外部参照とできます。

• srcフォルダーに画像を配置しておく
• 容量の小さい画像はmain.jsにバンドルされる
• 容量の大きい画像はビルドすると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フォルダーに成果物が出力されます。