Webpack 설정 생성기
모던 웹 개발을 위한 Webpack 번들러 설정을 생성합니다.
프로젝트 설정
언어 설정
개발 서버 설정
최적화 설정
플러그인 설정
webpack.config.js 미리보기
필요한 패키지
설치 명령어:
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env css-loader style-loader file-loader typescript ts-loader @babel/preset-typescript @babel/preset-react sass-loader sass eslint-webpack-plugin패키지 목록:
- webpack
- webpack-cli
- webpack-dev-server
- html-webpack-plugin
- babel-loader
- @babel/core
- @babel/preset-env
- css-loader
- style-loader
- file-loader
- typescript
- ts-loader
- @babel/preset-typescript
- @babel/preset-react
- sass-loader
- sass
- eslint-webpack-plugin
package.json 스크립트
개발 서버:
"start": "webpack serve --mode development --open"빌드:
"build": "webpack --mode production"번들 분석:
"analyze": "webpack-bundle-analyzer dist/stats.json"개발 빌드:
"dev": "webpack --mode development --watch"Webpack 최적화 팁
📦 코드 분할로 번들 크기 최적화
🌲 Tree Shaking으로 불필요한 코드 제거
💨 Hot Module Replacement 활용
🗜️ 프로덕션 압축 활성화
📊 Bundle Analyzer로 성능 분석
🚀 캐싱으로 빌드 속도 향상