모듈의 기원 모듈 시스템 번들러 Webpack

1. 2022.01.28
서비스 개발팀
이연권
모듈시스템과 Webpack
날짜
팀
담당자

2. 목차
##
목차
• 모듈의 기원
• 모듈 시스템
• 번들러
• Webpack

3. 너무 길어지는 코드에 대한 처리
모듈의 기원
01
ODQ 코드의 일부
ODQ 코드의 라인 수
너무 길어지는 코드에 대한 처리

4. 파일들의 의존성 및 순서 문제
모듈의 기원
01
파일의 의존성 및 순서 문제

5. CJS, AMD
모듈 시스템
02
CJS(CommonJS)
CommonJS는 웹 브라우저 밖의 자바스크립트를 위한 모듈 생태계 규칙을 설립하기 위해 만들어졌습니다. 그렇기 때문에 CommonJS 는 보통 서버 사이드 개발에 좀 더
적합하게 설계되었고 Node.js의 표준 모듈시스템으로 자리잡았습니다.
AMD(Asynchronous Module Definition)
CommonJS는 모든 파일이 디스크에 있어, 필요할 때 바로 불러올 수 있는 상황에서 주로 사용됩니다. 브라우저에서 이런 방식은 필요한 모듈이 모두 다운로드 될 때까지
아무것도 할 수 없는 상황이 발생합니다. 그래서 비동기 방식으로 자바스크립트 모듈을 사용하는 API인, AMD가 만들어졌습니다.

6. RequireJS
모듈 시스템
02
RequireJS (AMD)
fruits.js
main.js
apple.js banana.js
fruits.js
main.js

7. ESM(ECMAScript Module)
모듈 시스템
02
ESM(ECMAScript Module)
자바스크립트의 표준 스펙인 ECMAScript에서 모듈 시스템에 대한 문법을 내놓았습니다. CommonJS의 문제점인 비동기 방식에 대한 지원도 합
니다.

8. 번들러의 역할과 이점
번들러
03
번들러의 역할과 이점
번들러는 웹사이트 개발과정에서 생기는 많은 리소스 파일들을 최적화 해주는 역할을 합니다.
1. 여러 개의 파일을 하나로 묶어줍니다 -> 네트워크 접속의 부담을 줄여 더 빠른 서비스를 제공할 수 있습니다.
2. 다양한 서드파티 라이브러리를 사용할 수 있습니다 -> 구형 브라우저를 지원하도록 도와주는 babel이나 보다 편하게 CSS를 작성할 수 있는
전처리기 등
3. 코드의 양을 최소화 해줍니다 -> 변수명, 띄어쓰기 및 개행을 변경, 제거하여 파일의 크기를 줄여줍니다.

9. 번들러 빌드 예시
번들러
03
번들러 빌드 예시
HTML JavaScript
번들러를 통하여 작성한 파일들을 아래와 같이 번들링 할 수 있습니다.

10. 번들러의 종류
번들러
03
번들러의 종류

11. PARCEL
번들러
03
PARCEL
Parcel은 2017년에 나온 웹 애플리케이션의 번들러 입니다.
Parcel의 특징은 설정이 필요 없는 zero-configuration 입니다.
큰 웹 애플리케이션을 빌드하면 소모되는 시간이 상당한데
Parcel은 캐싱을 하므로 최초 빌드보다는 두 번째 빌드 속도부터 빠른 속도로 빌드가 됩니다

12. Rollup
번들러
03
Rollup
Rollup은 ESM 형태로 번들링이 이루어져 라이브러리 제작에 적합한 번들러 입니다.
자바스크립트 파일에서 번들 전체에 사용하지 않는 코드를 제거해주는 Tree shaking이
잘 이루어진다는 장점이 있습니다.
여러 개의 모듈을 하나의 scope로 합쳐진 단일 모듈로 만들기 때문에 코드를 줄일 수 있습니다.
웹팩 번들링
롤업 번들링

13. Webpack
번들러
03
Webpack
Webpack은 2012년도에 나온 번들링 도구 입니다.
타 번들러에 비해 생태계가 풍부하여 많은 플러그인 지원이 장점이며 안정적입니다.
Development, Production 모드를 나눠 Production 모드에서는 코드 난독화, 압축, 트리셰이킹을 지원합니다,
Loader에서 babel을 통해 일부 브라우저에서 지원되지않는 ES6 문법에 대한 트랜스파일링을 지원합니다,

14. Webpack설치 및 필요한 파일
Webpack
04
Webpack설치 및 필요한 파일
프로젝트 생성 및 webpack 설치
cli를 사용하여 webpack 빌드

15. Webpack 환경설정
Webpack
04
Mode
Mode 매개 변수를 [development, production 또는 none]으로 설정하면 각 환경에 해당하는
Webpack의 내장 최적화를 사용할 수 있습니다. 아무런 설정을 하지 않으면 웹팩은 production으로
자동 설정합니다.
Entry point
Entry point는 내부 종속성 그래프를 시작하기 위해 번들링 프로세스를 시작할 지점을 나타냅니다.
Webpack은 Entry point에 의존하는 다른 모듈과 라이브러리를 파악합니다.
Entry point는 한 개일 수도 있고, 여러 개일 수도 있습니다.
Output
output 설정은 웹팩이 컴파일 된 파일을 어떻게 디스크에 생성할지 표현하는 것입니다.
Entry는 여러 개 있을 수 있지만, output은 오직 하나만 지정할 수 있습니다.
Plugin
Plugin은 웹팩에 기본적인 동작에 추가적인 기능을 제공하게 해줍니다.
Plugin은 다양한 커스텀 기능을 제공하는데, 번들링된 파일을 난독화, 압축할 수 있고, 파일 복사 파일
추출, 별칭 사용 등과 같은 작업을 수행할 수도 있습니다.
webpack.config.js

16. 참고
JavaScript 번들러로 본 조선시대 붕당의 이해 | 요즘IT
[JavaScript] CJS, AMD, UMD, ESM
[Webpack] 웹팩 개념 알아보기
NAVER D2
NAVER D2
[ECMAScript] AMD, CommonJS 의 JavaScript 모듈화 | MINJUNG
자바스크립트 범용화와 모듈 시스템 | ESM, CommonJS
Webpack에서 Rollup전환기

17. 감사합니다