Webpack 심화
개념 설명
모드 번들러 Webpack의 고급 기능과 성능 최적화, 사용자 정의 설정 방법.
핵심 포인트
- Entry/Output 전략: 다중 엔트리 포인트, 동적 임포트 분할
- Loaders: 파일 단위 변환 (babel-loader, css-loader, file-loader)
- Plugins: 번들 단위 처리 (HtmlWebpackPlugin, MiniCssExtractPlugin)
- Code Splitting: SplitChunksPlugin로 vendor, common 번들 분리
- Tree Shaking: ES Module의 정적 구조 활용하여 미사용 코드 제거
예시 코드
// webpack.config.js 최적화 설정
module.exports = {
entry: {
main: './src/index.js',
vendor: ['react', 'react-dom']
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\\/]node_modules[\\\/]/,
name: 'vendors',
priority: 10
},
common: {
name: 'common',
minChunks: 2,
priority: 5
}
}
},
usedExports: true, // Tree shaking
sideEffects: false
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
};더 많은 내용을 확인하세요! 📚
“Webpack 심화”의 전체 내용을 보시려면 프리미엄 플랜이 필요합니다.
✨ 모든 기술 문서 무제한 액세스
📝 실습 예제와 상세한 코드 설명
🎯 면접 예상 질문과 답변 가이드