728x90
번들링 사이즈 줄이기 전과 후 용량 비교
terser-webpack-plugin 는 webpack5부터 내장된 plugin이라서
따로 npm install 해 줄 필요없다.
15KB나 차이가 난다
나머지 소스는 이전 포스팅에 나와있음
https://tomhoon.tistory.com/662
Webpack - ecmascript 최신 내용 적용 안될 때 babel을 추가하여 빌드하기
ECMAScript는 계속해서 업데이트 된다. browser는 업데이트된 속도를 따라가지 못한다. 개발자들은 기다릴 필요 없이 새로나온 ECMAScript 기능을 old 버전으로 바꿔주면 된다. 바꿔주는 녀석이 babel이
tomhoon.tistory.com
1. webpack.config.js plugins 추가
terser-webpack-plugin 는 webpack5부터 내장된 plugin이라서
따로 npm install 해 줄 필요없다.
// can't use ecma script module. use only common.js
console.log("module >>> ", module);
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
// minimum option
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist'),
/**
* publicPath
* under version 4: publicPath is empty('').
* over version 4: publicPath is auto
*
* can use list
* 1. 'dist/'
* 2. 'https://image.oliveyoung.co.kr/uploads/contents/202410/25oyDay/pc_visual.jpg'
*/
publicPath: 'dist/'
},
mode: 'none',
module: {
/**
* webpack: I don't know what that menas 'import Kiwi...'
* me: thank you for asking, If you don't know somethig, you should check out the rules.
* webpack: perfect
*/
rules: [
{
test: /\.(png|jpg)$/,
/**
* asset/inline :bake image into base64. could be larger file size(more better)
* asset/resource: request image each of them. cost of call is larger
*/
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 3 * 1024 // 3kilobyte
}
}
},
{
test: /\.txt$/,
type: 'asset/source'
},
{
// loader should be installed explicitly
test: /\.css$/,
use: [
'style-loader', 'css-loader'
]
},
{
test: /\.scss$/,
// webpack invoke right to left in array
//
use: [
'style-loader', 'css-loader', 'sass-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/env'],// ecmascript 8,7,6,5 make down version
plugins: ['@babel/plugin-proposal-class-properties']
}
}
}
],
},
plugins: [
new TerserPlugin()
]
}
2. npm run build 하기
'서버 > Webpack' 카테고리의 다른 글
Webpack5 - 파일명으로 캐싱하는 브라우저를 피하기 (1) | 2024.11.28 |
---|---|
Webpack5 - build시 css 파일 분리하기 (0) | 2024.11.28 |
Webpack - ecmascript 최신 내용 적용 안될 때 babel을 추가하여 빌드하기 (0) | 2024.11.05 |
Webpack - sass 적용된 webpack.config.js 파일 (0) | 2024.11.05 |
Webpack - vue, react처럼 component 직접 만들어보기 (3) | 2024.10.28 |