Ativos Comuns no Webpack
Agora vamos experimentar com ativos comuns.
Vamos configurar para que imagens menores que 8kb
sejam convertidas para base64, e imagens maiores
que esse tamanho sejam copiadas para um arquivo:
export default {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve('dist'),
},
module: {
rules: [
{
test: /\.png$/,
type: 'asset',
}
]
},
plugins: [
new HtmlWebpackPlugin(),
],
};
É possível alterar o limite de tamanho
da imagem. Por exemplo, vamos aplicar um 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(),
],
};
Conecte à entrada vários imagens de tamanhos diferentes. Verifique que tipo de transformação é aplicado para cada imagem.
