Source assets ใน Webpack

ตอนนี้เรามาลองใช้ source assets กัน มาทำให้เนื้อหาของไฟล์ข้อความ เมื่อทำการ import แล้วเข้าไปอยู่ในตัวแปร:

export default {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve('dist'),
	},
	module: {
		rules: [
			{
				test: /\.txt$/,
				type: 'asset/source',
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin(),
	],
};

เรามาสร้างไฟล์ข้อความกัน:

abcde

มาเชื่อมต่อไฟล์นี้กับ entry point:

import text from './text.txt';

ในตัวแปร text จะได้รับ เนื้อหาของไฟล์ข้อความ:

console.log(text); // จะแสดง 'abcde'

เชื่อมต่อไฟล์ข้อความหลายไฟล์ กับ entry point รับเนื้อหาของพวกมัน ไว้ในตัวแปร