Gemeinsame Assets in Webpack
Lassen Sie uns nun gemeinsame Assets ausprobieren.
Machen wir es so, dass Bilder unter 8kb
in base64 umgewandelt werden und Bilder größer
als diese Größe in eine Datei kopiert werden:
export default {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve('dist'),
},
module: {
rules: [
{
test: /\.png$/,
type: 'asset',
}
]
},
plugins: [
new HtmlWebpackPlugin(),
],
};
Man kann die Beschränkung für die Bildgröße ändern.
Als Beispiel setzen wir eine Beschränkung
von 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(),
],
};
Binden Sie mehrere Bilder unterschiedlicher Größe in den Einstiegspunkt ein. Überprüfen Sie, welcher Art von Transformationen für jedes Bild angewendet wird.
