Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webpack the module bundler
Search
Jinny You
August 08, 2018
Programming
0
52
Webpack the module bundler
사내 스터디 시간에 발표한 웹팩 관련 자료입니다.
Jinny You
August 08, 2018
Tweet
Share
More Decks by Jinny You
See All by Jinny You
ThorVG's Lottie Model in Action
tinyjin
0
55
국민대학교 사제동행 세미나
tinyjin
0
160
Cumulus - Application Weakness Monitoring Software
tinyjin
1
18
개인정보와 개인정보 비식별화
tinyjin
0
39
PWA 품은 안드로이드 웹뷰 성능 개선기
tinyjin
0
830
PWA(Progressive Web APP)
tinyjin
1
130
Nice Place Cast
tinyjin
0
36
한국정보올림피아드 제대로 준비하기
tinyjin
0
51
2017 SW교육 학생동아리 Lecture 6.
tinyjin
0
44
Other Decks in Programming
See All in Programming
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
Snowflakeで眠ったデータを起こそう!
estie
0
150
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
100
Let's learn code review
riofujimon
2
590
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
Milestoner
bkuhlmann
1
410
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.5k
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
690
Netty Chicago Java User Group 2024-04-17
sullis
0
210
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
360
Java 22 Overview
kishida
1
200
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
470
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Gamification - CAS2011
davidbonilla
77
4.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Automating Front-end Workflow
addyosmani
1357
200k
Embracing the Ebb and Flow
colly
80
4.2k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Scaling GitHub
holman
457
140k
A Tale of Four Properties
chriscoyier
152
22k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
Transcript
Webpack 개발팀 유진의 2018.08.08 The Module Bundler
웹팩을 사용하는 이유?
1. 웹 기술의 진화 과거의 웹 어플리케이션 오늘날의 웹 어플리케이션
1. 웹 기술의 진화
2. 모듈화 문제 ‘모듈화’
2. 모듈화 문제
3. 크로스 브라우징
3. 크로스 브라우징
4. Npm과의 연결 Node Package Manager
4. Npm과의 연결
유사 소프트웨어와의 비교
Gulp와 Grunt
Gulp와 Grunt Task Runner concat, lint, minify, testing
Gulp와 Grunt Webpack = (gulp || grunt) + browserify
웹팩이란 무엇인가?
“ 웹팩은 다양해진 웹 기술을 하나로 묶어주고 여러 환경에서의 크로스
브라우징을 가능케 해주며 성능을 개선해주는 모듈 번들러(Module Bundler)이다. “
웹팩의 동작방식
1. 웹팩의 기본 개념 Entry, Output, Loader, Plugin
1-1. Entry Entry : 모듈 번들링의 시작점 Import => Dependency
Graph
1-2. Output Output : 번들링된 파일의 저장 위치 => dist
1-3. Loader Loader : 모듈에 대해 행동을 취해주는 블랙박스. ?
모듈 (JS, PNG, CSS…) => Dependency Graph => Ex) babel-loader
1-4. Plugin Plugin : 번들링된 파일에 대해 행동을 취해주는 블랙박스.
? Bundle File => dist => Ex) 코드 난독화
2. 결과물 index.html index.js 모든 모듈을 하나의 파일에 압축하여 모듈
로딩과정이 생략되었으므로, 성능상의 이점 존재.
링크 웹팩 가이드 - http://jinui.kr/221333865963 PPT - https://www.slideshare.net/JinuiYou/ss-108973799