Webpack의 일반 Assets
이제 일반 assets을 시도해 봅시다.
8kb보다 작은 이미지는 base64로 변환되고,
이보다 큰 이미지는 파일로 복사되도록 만들어 봅시다:
export default {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve('dist'),
},
module: {
rules: [
{
test: /\.png$/,
type: 'asset',
}
]
},
plugins: [
new HtmlWebpackPlugin(),
],
};
이미지 크기 제한을 변경할 수 있습니다.
예를 들어, 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(),
],
};
엔트리 포인트에 여러 가지 크기의 이미지를 연결하세요. 각 이미지에 대해 어떤 변환 유형이 적용되는지 확인하세요.
