Algemene Assets in Webpack
Laat ons nou algemene assets probeer.
Maak dit so dat beelde minder as 8kb
in base64 verander word, en beelde groter
as hierdie grootte na 'n lêer gekopieer word:
export default {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve('dist'),
},
module: {
rules: [
{
test: /\.png$/,
type: 'asset',
}
]
},
plugins: [
new HtmlWebpackPlugin(),
],
};
Jy kan die beperking op die beeldgrootte verander.
Byvoorbeeld, laat ons 'n beperking van
4kb opleg:
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(),
],
};
Koppel verskeie beelde van verskillende groottes aan die insaakpunt. Gaan na watter tipe transformasies vir elke beeld toegepas word.
