Aset Umum dalam Webpack
Sekarang mari kita cuba aset umum.
Mari kita buat supaya gambar kurang daripada 8kb
ditukar kepada base64, dan gambar lebih besar
daripada saiz ini disalin ke dalam fail:
export default {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve('dist'),
},
module: {
rules: [
{
test: /\.png$/,
type: 'asset',
}
]
},
plugins: [
new HtmlWebpackPlugin(),
],
};
Had saiz gambar boleh diubah.
Sebagai contoh, mari kita kenakan had
4kb:
export default {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve('dist'),
},
module: {
rules: [
{
test: /\.png$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 4 * 1024 // 4kb
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin(),
],
};
Sambungkan beberapa gambar dengan saiz yang berbeza ke titik kemasukan. Semak jenis transformasi mana yang digunakan untuk setiap gambar.
