Algemene Assets in Webpack
Laten we nu algemene assets proberen.
Laten we het zo instellen dat afbeeldingen kleiner dan 8kb
worden omgezet in base64, en afbeeldingen groter
dan deze grootte worden gekopieerd naar een bestand:
export default {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve('dist'),
},
module: {
rules: [
{
test: /\.png$/,
type: 'asset',
}
]
},
plugins: [
new HtmlWebpackPlugin(),
],
};
De limiet voor de afbeeldingsgrootte kan worden gewijzigd.
Laten we bijvoorbeeld een limiet instellen
van 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(),
],
};
Sluit enkele afbeeldingen van verschillende groottes aan op het entry point. Controleer welk type transformatie wordt toegepast voor elke afbeelding.
