【webpack5】sassの画像やフォントのアセットファイルの依存関係を解決する【web制作】

test
├ node_modules
├ dist
│ └ css
├ src
│ ├ image
│ │ └ aaa.jpg
│ ├ js
│ │ └ index.js
│ ├ scss
│ │ ├ flocss
│ │ │ ├ _footer.scss
│ │ │ └ _header.scss
│ │ └ style.scss
│ └ index.html
├ package-lock.json
├ package.json
├ webpack.common.js
├ webpack.dev.js
└ webpack.prod.js

.p-header {
  // webpackで指定する場合
	background-image: url('../image/aaa.jpg');

  // その他コンパイラで指定する場合
  background-image: url('../../image/aaa.jpg');
}

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackWatchedGlobEntries = require('webpack-watched-glob-entries-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const entries = WebpackWatchedGlobEntries.getEntries([path.resolve(__dirname, './src/js/**/*.js')], {
	ignore: path.resolve(__dirname, './src/js/**/_*.js'),
})();

const htmlGlobPlugins = (entries, srcPath) => {
	return Object.keys(entries).map(
		(key) =>
			new HtmlWebpackPlugin({
				inject: 'body',
				filename: `${key}.html`,
				template: `${srcPath}/${key}.html`,
				chunks: [key],
			})
	);
};

module.exports = (outputFile) => ({
	entry: entries,

	output: {
		path: path.resolve(__dirname, './dist'),
		filename: `./js/${outputFile}.js`,
	},

	module: {
		rules: [
			{
				test: /\.(sa|sc|c)ss$/i,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader',
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								plugins: [require('autoprefixer')({ grid: true })],
							},
						},
					},
					{
						loader: 'sass-loader',
						options: {
							implementation: require('sass'),
						},
					},
				],
			},

			{
				test: /\.html$/i,
				loader: 'html-loader',
			},

			{
				test: /\.(png|jpe?g|gif|svg)$/i,
				generator: {
					filename: `./image/[name].[contenthash][ext]`,
				},
				type: 'asset/resource',
			},
		],
	},

	plugins: [
		new CleanWebpackPlugin(),
		new WebpackWatchedGlobEntries(),

		new MiniCssExtractPlugin({
			filename: `./css/${outputFile}.css`,
		}),

		...htmlGlobPlugins(entries, './src'),
	],

	// 追加
	resolve: {
		alias: {
			'@image': path.resolve(__dirname, './src/image/'),
		},
	},
});

// 追加
resolve: {
	alias: {
		'@image': path.resolve(__dirname, './src/image/'),
	},
},

C:\Users\shuuk\OneDrive\デスクトップ\test\src\image

.p-header {
	background-image: url('@image/aaa.jpg');
}