요즘 뜨는 프론트엔드 웹 기술인 Webpack에 대한 간단한 발표 자료입니다.

1. Webpack
개발팀 유진의2018.08.08
The Module Bundler

2. 웹팩을 사용하는 이유?

3. 1. 웹 기술의 진화
과거의 웹 어플리케이션 오늘날의 웹 어플리케이션

4. 1. 웹 기술의 진화

5. 2. 모듈화 문제
‘모듈화’

6. 2. 모듈화 문제

7. 3. 크로스 브라우징

8. 3. 크로스 브라우징

9. 4. Npm과의 연결
Node Package Manager

10. 4. Npm과의 연결

11. 유사 소프트웨어와의 비교

12. Gulp와 Grunt

13. Gulp와 Grunt
Task Runner
concat, lint, minify, testing

14. Gulp와 Grunt
Webpack = (gulp || grunt) + browserify

15. 웹팩이란 무엇인가?

16. “
웹팩은 다양해진 웹 기술을 하나로 묶어주고
여러 환경에서의 크로스 브라우징을 가능케 해주며
성능을 개선해주는 모듈 번들러(Module Bundler)이다.
“

17. 웹팩의 동작방식

18. 1. 웹팩의 기본 개념
Entry, Output, Loader, Plugin

19. 1-1. Entry
Entry : 모듈 번들링의 시작점
Import
=> Dependency Graph

20. 1-2. Output
Output : 번들링된 파일의 저장 위치
=> dist

21. 1-3. Loader
Loader : 모듈에 대해 행동을 취해주는 블랙박스.
?모듈
(JS, PNG, CSS…)
=>
Dependency
Graph
=>
Ex) babel-loader

22. 1-4. Plugin
Plugin : 번들링된 파일에 대해 행동을 취해주는 블랙박스.
?Bundle File => dist=>
Ex) 코드 난독화

23. 2. 결과물
index.html index.js
모든 모듈을 하나의 파일에 압축하여
모듈 로딩과정이 생략되었으므로, 성능상의 이점 존재.

24. 출처
웹팩 가이드 - http://jinui.kr/221333865963