CSS内で背景画像を使用する場合、Webpackでビルドすると以下のようなエラーが発生することがあります。
この問題を解決するには、file-loader と url-loader の2つのパッケージを利用する必要があります。
1. パッケージのインストール
npm install --save-dev url-loader file-loader
url-loader: 取り込んだ画像データをBase64エンコードし、DataURLとしてインライン化します。
file-loader: 画像のURL参照を解決し、設定に基づいて画像ファイルを適切なパスにコピーし、バンドル後のファイルの参照パスを正しく修正します。
動作ルール:
- ファイルサイズ < limit: url-loaderがBase64エンコードしてDataURL化
- ファイルサイズ > limit: url-loaderがfile-loaderに処理を委譲、パラメータもそのまま渡される
2. webpack.config.js の設定
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 1024 * 10, // 10KB以下をDataURLに変換
name: '[name].[ext]',
outputPath: 'assets/images/',
publicPath: '../dist/assets/images/'
}
}]
}
]
}
各オプションの説明:
- limit: DataURL化する閾値（バイト単位）
- name: 出力ファイル名のテンプレート
- outputPath: 画像ファイルの出力先ディレクトリ
- publicPath: バンドルファイル内の画像参照パスのプレフィックス
3. ディレクトリ構成例
index.html:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<div class="hero"></div>
<script src="../dist/index.bundle.js"></script>
</body>
</html>
src/js/main.js:
import '../css/style.css';
webpack.config.js:
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: path.resolve(__dirname, 'src/js/main.js'),
auth: path.resolve(__dirname, 'src/js/auth.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 5120, // 5KB
name: '[name]-[hash:8].[ext]',
outputPath: 'images/',
publicPath: '../dist/images/'
}
}]
}
]
}
};
4. ビルド実行と確認
npm run build または npm run start を実行すると、dist/images/ ディレクトリに画像がコピーされ、バンドルファイル内の参照パスが適切に設定されます。
これでCSS背景画像をWebpackで正しく扱えるようになります。