Webpack the module bundler

Slide 1

Slide 1 text

Webpack 개발팀 유진의 2018.08.08 The Module Bundler

Slide 2

Slide 2 text

웹팩을 사용하는 이유?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

1. 웹 기술의 진화

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

2. 모듈화 문제

Slide 7

Slide 7 text

3. 크로스 브라우징

Slide 8

Slide 8 text

3. 크로스 브라우징

Slide 9

Slide 9 text

4. Npm과의 연결 Node Package Manager

Slide 10

Slide 10 text

4. Npm과의 연결

Slide 11

Slide 11 text

유사 소프트웨어와의 비교

Slide 12

Slide 12 text

Gulp와 Grunt

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

웹팩이란 무엇인가?

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

웹팩의 동작방식

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

링크 웹팩 가이드 - http://jinui.kr/221333865963 PPT - https://www.slideshare.net/JinuiYou/ss-108973799