Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
dist
src
ReadMe.md
package.json
webpack.config.js

ReadMe.md

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

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

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

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

インストールコマンド

まずはpackage.jsonを作る。

npm init -y

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

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