Webpack the module bundler

사내 스터디 시간에 발표한 웹팩 관련 자료입니다.

Transcript

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 PPT - https://www.slideshare.net/JinuiYou/ss-108973799