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 + url-loader + file-loader のサンプル

url-loaderとfile-loaderを使うと、CSS内の画像等を埋め込んだり、外部参照とできます。

  • srcフォルダーに画像を配置しておく
  • 容量の小さい画像はurl-loaderによってmain.jsにバンドルされる
  • 容量の大きい画像はfile-loaderによってビルドするとfile-loaderによってdistフォルダーにコピーされる

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

インストールコマンド

まずはpackage.jsonを作る。

npm init -y

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

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