웹팩과 바벨에 대한 내용 정리 프론트엔드 신입 개발자를 위해 간략하게 준비

1. WEBPACK / BABEL
2021.01.25
작성자 : 배창현

2. 목차
 Webpack
 Babel

3. WEBPACK

4.  Webpack 이란?
Webpack 은 최신 javascript 응용 프로그램을 위한 정적 모듈 번들러(module bundler)
* module 이란 프로그램을 구성하는 일부요소 또는 기능별로 나뉘어지는 프로그램
* bundler 는 지정한 단위로 파일들을 하나로 만들어 주는 역할을 수행
WEBPACK
Bundle your scripts, images ..
의존 관계에 있는 모듈들을 하나의
파일(자바스크립트 파일)로 번들링

5.  Webpack 을 사용하는 이유?
다수의 자바스크립트 파일을 하나의 파일로 번들링하므로 html 파일에서 script 태그로 다수의 자바스크립트 파일
을 로드해야하는 번거로움이 사라짐(HTTP 요청 횟수 감소)
-> overhead 감소
웹팩은 플러그인(plugin) 및 로더(loader) 등과 함께 사용하면 이미지, 글꼴, SASS, CSS 와 같은 종속성 및 자산을 관
리하는데 훌륭한 개발경험을 제공합니다.(tree shaking 및 code splitting 등 지원)
* tree shaking 이란 데드코드(dead code) 를 제거하는 것을 의미(사용하지 않는 일부 코드를 제거 -> 번들링 크기와 로드 시간이 줄
어듬)
* code splitting 이란 코드를 다양한 번들로 나누며, 해당 번들은 필요할 때 동적으로 로드괴거나 병렬로 로드가 가능 -> 로드 시간
개선
WEBPACK

6. WEBPACK 설치
웹팩은 각 프로젝트 또는 전역으로 설치가 가능
npm i -g webpack webpack-cli
npm i –D webpack webpack-cli

7.  Webpack 구성 및 핵심 개념
- Entry
- Output
- Loaders
- Plugins
- Mode
- Browser Compatibility
* 웹팩을 사용할 때 반드시 설정파일이 필요하지는 않지만, 대부분의 경우에는 설정파일을 사용
* 설정파일은 디폴트로 webpack.config.js 를 바라본다.(경로는 프로젝트 루트 폴더)
WEBPACK
// webpack.config.js
const path = require('path’);
module.exports = {
entry: './src/index.js’,
output: {
filename: 'bundle.js’,
path: path.resolve(__dirname, 'dist’),
},
};

8.  Webpack 구성 및 핵심 개념
- Entry : 파일을 읽어들이기 위한 시작점, 번들링 시작점, 의존성 그래프의 시작점
- Output : 번들링 결과물 경로 및 파일명 설정
- Loaders : 웹팩은 오직 자바스크립트, JSON 만 해석이 가능하기 때문에 CSS, 이미지, 폰트 등을 웹팩이 해석 할 수
있는 자바스크리틉로 변경해야 합니다. loader 는 이러한 역할을 수행
- Plugins : 웹팩의 기본적인 동작에 추가적인 기능을 제공(번들링한 결과물에 추가적인 작업을 제공)
- Mode : 웹팩4 에서 추가된 옵션이며, production / development / none 3가지가 존재하며 각 옵션마다 최적화 옵
션을 자동으로 설정
- Browser Compatibility : 웹팩은 ES5를 준수하는 모든 브라우저를 지원(IE8 이하 미지원) -> 이전 브라우저를 지원
하려면 polyfill 을 해야함
WEBPACK

9.  Webpack 구성 및 핵심 개념
WEBPACK
const CleanWebpackPlugin = require("clean-webpack-plugin")
module.exports = {
entry: "./script.js",
output: {
path: __dirname,
filename: "build.js",
},
module: {
rules: [
{
test: /.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [new CleanWebpackPlugin("build.js")],
}
"scripts": {
"build": "webpack"
"watch": "webpack --watch"
}
npm run build
웹팩 실행(package.json)
참조 : https://flaviocopes.com/webpack/
웹팩은 개발 편의기능을 제공해주고 있다.
--watch
webpack dev server -> 웹팩에서 제공하는
개발서버를 사용하면 live reloading 통해,
개발속도 및 반영되는 부분을 바로 확인이 가능
source map -> 웹팩은 코드를 번들로 제공하므로,
오류를 발생시킨 원본 파일에 대한 참조가 필요

10.  Webpack5
- 웹팩5 는 최소 Node.js 10.13.0 이 필요
- tree shaking 개선(번들 크기 개선)
- 영구 캐싱으로 빠른 빌드
- 장기 캐싱으로 로딩 시간 단축
WEBPACK

11. BABEL

12.  Babel 이란?
Babel 은 최신 javascript 문법(ES6+ 이상)을 이전 javascript 문법으로 변환해주는 컴파일러 또는 트랜스파일러다.
굳이 최신문법을 왜?
크로스 브라우징이라는 개념을 알면 바벨은 정말 좋은 도구임을 알게 된다.
브라우저 및 플랫폼마다 모든 javascript 문법이 잘 동작하면 문제가 없다. 하지만 모든 브라우저 및 플랫폼에서 동작
하지 않고 일부 최신버전에서만 동작하는 경우도 발생을 한다.
IE11 에서 동작해야할 자바스크립트 코드를 ES2015 로 작성한다면? 사실상 동작을 보장할수가 없다.
이런 측면에서 바벨은 최대한 모든 실행환경(브라우저, 플랫폼)에서 자바스크립트가 실행이 가능하도록 보장해준다.
바벨은 자바스크립트 관련 컴파일만 지원하기 때문에, 최신 브라우저에서 지원하는 BOM 구문은 다른방식으로
polyfill 해서 사용해야한다.(classList 같은것들..)
BABEL

13.  Babel 이란?
바벨은 3단계로 빌드를 진행
- 파싱(parsing)
- 변환(transforming)
- 출력(printing)
바벨은 파싱 / 출력을 담당하고 변환은 플러그인을 사용하여 진행한다.
-> @babel/core 자체는 해석을 못한다는 의미 -> presets / plugins 에게 변환을 위임
presets = plugins 을 모아둔 형식
BABEL
.babelrc

14.  Babel 구성과 설치
npm i –D @babel/core
npm i –D @babel/preset-env
npm i –D @babel/cli
프로젝트 루트 폴더에 .babelrc 설정파일 생성
만약에, 웹팩과 함께 사용할려면?
npm i –D babel-loader
모듈 설치 후 webpack.config.js 에 loader 설정을 추가해 줘야한다.
BABEL

15.  Babel polyfill
폴리필(polyfill)?
브라우저에서 지원하지 않는 코드를 사용가능한 코드 조각이나 플러그인(추가기능)을 의미
바벨은 ES6+ 에서 지원하는 문법을 이전 버전 문법으로 변환해주지만, ES5 에 존재하지 않는 메서드들 및 속성은 자
동으로 추가해주지 않는다.
-> 이러한 부분을 해결하기 위해서 polyfill 을 사용(Map, Set, Promise 등을 사용가능한 객체로 생성해줌)
@babel/polyfill 모듈을 사용중단(deprecated) 되었으므로, 다른방식으로 사용하는게 좋다.
(해당 모듈을 가져오면 모든 모듈내의 모든 폴리필을 추가하면서 번들파일용량이 커진다)
core-js / regenerator-runtime 을 직접 사용하는 방식을 제안하고 있다.
@babel/preset-env 에서 useBuiltIns 옵션을 함께 사용하여 적용이 가능하다.
참고 : https://babeljs.io/docs/en/babel-preset-env
BABEL