Generelle assets i Webpack
Lad os nu prøve generelle assets.
Lad os sørge for, at billeder mindre end 8kb
bliver konverteret til base64, og billeder større
end denne størrelse bliver kopieret 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(),
],
};
Grænsen for billedstørrelse kan ændres.
For eksempel, lad os sætte en grænse
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(),
],
};
Tilslut flere billeder af forskellig størrelse til entry point. Kontroller, hvilken type transformation der anvendes for hvert billede.
