I. 웹팩 Webpack
- 번들러 bundler - 프로젝트에 사용되는 파일들을 하나 또는 소수의 파일들로 압축
- 어플리케이션이 로딩 및 실행 속도 향상
- 각종 플러그인과 옵션을 사용하여 코드를 다양한 방법으로 변환/압축 가능
- 🧊 공식 사이트 보기
- 동종/유사 제품: RollUp, Parcel, Gulp, Vite...
⭐ 프로젝트에 사용해보기
0. 소스 저장소 분리하기
src폴더를 만들고.js파일들 모두 이동
1. 프로젝트에 웹팩 설치
npm install webpack webpack-cli --save-dev
2. 웹팩 설정 파일
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
// 💡 추가설정들
watch: true, // 파일 수정 후 저장시 자동으로 다시 빌드
experiments: {
topLevelAwait: true // 모듈 await 가능하도록
}
};
./src/main.js파일과, 연결된 모든 모듈들을./dist/main.js파일로 통합
3. 빌드 명령 추가
package.json
"scripts": {
"build": "webpack"
},
script항목에"build": "webpack"추가-
{ "type": "module" }부분 제거하기
4. 빌드 및 실행
npm run build
- 위 명령어로 빌드 실행
- 💡
./dist/main.js파일 확인 - javascript beautifier 사이트들에서 살펴보기 - HTML 파일에서
script의src를./dist/main.js로 변경 - 페이지에서 확인, 코드 수정 후 변화 확인
II. 바벨
- 자바스크립트를 보다 오래된 환경에서 동작할 수 있는 버전으로 컴파일
- 🏋️ 공식 사이트 보기
- 기타 방법: 타입스크립트 컴파일러 사용
1. 🔗 사이트에서 체험해보기
TARGETS를 아래로 설정
ie 11
아래의 코드들 붙여넣어보기
const x = 1;
let y = 2;
const add = (x, y) => x + y;
const { length } = [1, 2, 3];
class Bird {
wings = 2
}
const 새돌이 = new Bird();
2. 웹팩 프로젝트에 적용해보기
1. 프로젝트에 관련 모듈 설치
npm install --save-dev babel-loader @babel/core @babel/preset-env
2. 웹팩에 설정 추가
webpack.config.js에 아래의 프로퍼티들 추가
target: ['web', 'es5'], // ⭐ ES5 이하로 해야 할 시 필요
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', { targets: "ie 11" }]
]
}
}
}
]
}
3. 빌드하고 결과 확인
npm run build
- 위 명령어로 빌드 실행
- 💡
./dist/main.js파일 확인 - javascript beautifier 사이트들에서 살펴보기