[Javascript] 웹팩, webpack, 바벨

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 사이트들에서 살펴보기