モジュールバンドラで画像を扱う【webpack5】
動作確認時の環境は以下。(2021/08/10時点)
// package.jsonから一部抜粋
"devDependencies": {
"autoprefixer": "^10.3.1",
"css-loader": "^6.2.0",
"postcss-loader": "^6.1.1",
"sass": "^1.37.5",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"webpack": "^5.49.0",
"webpack-cli": "^4.7.2"
}
学習中のwebpack講座は以下。(超わかりやすい上、無料。)
ただし、講座ではwebpack4で解説される。
そしてwebpack5では、webpack4とは画像の扱いが異なり、
これまで必要だったfile-loaderが不要となった。
→参考ドキュメント
If you have rules defined for loading assets using raw-loader, url-loader, or file-loader, please use Asset Modules instead as they're going to be deprecated in near future.
// file-loaderを使用しているなら、代わりにAsset Modulesを使用せよ。
画像を扱うための、
webpack.config.jsの定義方法を2つ記載する。
(参考までにwebpack4の記述方法も記載。)
▶︎webpack4
// module.rulesから定義を抜粋
{
test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "images",
publicPath: "images",
},
},
],
}
この定義をwebpack5のルールに従って変更する。
▶︎ひとつめ
outputに出力ディレクトリを指定する。
output: {
// ...
assetModuleFilename: "images/[hash][ext][query]",
publicPath: "http://127.0.0.1:5500/public/", // 画像がCDNの場合の指定方法
},
// module.rulesから定義を抜粋
{
test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/,
type: "asset/resource",
}
▶︎ふたつめ
module.rulesにgeneratorを定義する。
// module.rulesから定義を抜粋
{
test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/,
type: "asset/resource",
generator: {
filename: "images/[hash][ext][query]",
},
}
ともに公式ドキュメントにも記載がある。
以上。
この記事が気に入ったらサポートをしてみませんか?