Generelle assets i Webpack
La oss nå prøve generelle assets.
La oss gjøre det slik at bilder mindre enn 8kb
blir konvertert til base64, mens bilder større
enn denne størrelsen blir kopiert til en fil:
export default {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve('dist'),
},
module: {
rules: [
{
test: /\.png$/,
type: 'asset',
}
]
},
plugins: [
new HtmlWebpackPlugin(),
],
};
Du kan endre grensen for bildestørrelsen.
For eksempel, la oss sette en grense
på 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(),
],
};
Koble til flere bilder av ulik størrelse til inngangspunktet. Sjekk hvilken type transformasjon som brukes for hvert bilde.
