Ressources partagées dans Webpack
Essayons maintenant les ressources partagées.
Faisons en sorte que les images de moins de 8kb
soient converties en base64, et que les images plus grandes
que cette taille soient copiées dans un fichier :
export default {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve('dist'),
},
module: {
rules: [
{
test: /\.png$/,
type: 'asset',
}
]
},
plugins: [
new HtmlWebpackPlugin(),
],
};
On peut modifier la limite de taille
de l'image. Par exemple, imposons une limite
de 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(),
],
};
Connectez à point d'entrée plusieurs images de tailles différentes. Vérifiez quel type de transformation est appliqué pour chaque image.
