वेबपैक में एसेट फ़ाइल पथ को कस्टमाइज़ करना

बिल्ड फ़ोल्डर में एसेट फ़ाइलों का पथ निर्दिष्ट किया जा सकता है। यह assetModuleFilename सेटिंग का उपयोग करके किया जाता है। इस सेटिंग में हम उस फ़ोल्डर को निर्दिष्ट कर सकते हैं जहां एसेट्स रखे जाते हैं, साथ ही टेम्पलेट फ़ाइल नाम का।

नाम टेम्पलेट में कमांड [name] फ़ाइल का नाम दर्शाता है, कमांड [hash] - हैश, और कमांड [ext] - एक्सटेंशन मूल फ़ाइल का।

तो, आइए सेटिंग करें:

export default {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve('dist'),
		assetModuleFilename: 'assets/[name].[hash][ext]', // हमारी सेटिंग
	},
	module: {
		rules: [
			{
				test: /\.png$/,
				type: 'asset/resource'
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin(),
	],
};

ऐसा करें कि सभी एसेट resources फ़ोल्डर में रखे जाएं।