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
73
Webpack the module bundler
사내 스터디 시간에 발표한 웹팩 관련 자료입니다.
Jinny You
August 08, 2018
Tweet
Share
More Decks by Jinny You
See All by Jinny You
디자이너와 개발자가 자주 겪는 Lottie 핸드오프 FAQ - Figma Config Watch Party Seoul
tinyjin
0
86
인디 앱 개발자와 Flutter
tinyjin
0
430
모던 웹 기술로 C++ 렌더링 엔진 테스트 자동화하기
tinyjin
0
60
그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지
tinyjin
0
390
韩国的打卡地:你喜欢海边吗?
tinyjin
0
53
LottieFiles로 시작하는 빠르고 효율적인 애니메이션 핸드오프
tinyjin
0
97
エンジニアが見つめるLottieアニメーション
tinyjin
0
120
ThorVG's Lottie Model in Action
tinyjin
0
240
국민대학교 사제동행 세미나
tinyjin
0
430
Other Decks in Programming
See All in Programming
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
170
スマホから Youtube Shortsを見られないようにする
lemolatoon
3
680
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
650
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.8k
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.2k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
410
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
800
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
420
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.2k
CSC305 Lecture 04
javiergs
PRO
0
260
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
160
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Agile that works and the tools we love
rasmusluckow
331
21k
Designing for Performance
lara
610
69k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
4 Signs Your Business is Dying
shpigford
185
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Site-Speed That Sticks
csswizardry
11
890
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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