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
63
Webpack the module bundler
사내 스터디 시간에 발표한 웹팩 관련 자료입니다.
Jinny You
August 08, 2018
Tweet
Share
More Decks by Jinny You
See All by Jinny You
인디 앱 개발자와 Flutter
tinyjin
0
290
모던 웹 기술로 C++ 렌더링 엔진 테스트 자동화하기
tinyjin
0
19
그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지
tinyjin
0
210
韩国的打卡地:你喜欢海边吗?
tinyjin
0
23
LottieFiles로 시작하는 빠르고 효율적인 애니메이션 핸드오프
tinyjin
0
55
エンジニアが見つめるLottieアニメーション
tinyjin
0
77
ThorVG's Lottie Model in Action
tinyjin
0
170
국민대학교 사제동행 세미나
tinyjin
0
280
Cumulus - Application Weakness Monitoring Software
tinyjin
0
40
Other Decks in Programming
See All in Programming
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
28
6.1k
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
120
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
230
Alba: Why, How and What's So Interesting
okuramasafumi
0
240
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
500
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
990
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
170
Moscow Python Meetup №97. Константин Крестников (Техлид команды GigaChain (SberDevices)). GigaChain: Новые инструменты для разработки агентов на примере агента техподдержки
moscowdjango
PRO
0
100
Linux && Docker 研修/Linux && Docker training
forrep
22
4k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
0
150
AHC041解説
terryu16
0
540
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
3.7k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
990
Why Our Code Smells
bkeepers
PRO
335
57k
Raft: Consensus for Rubyists
vanstee
137
6.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
900
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Typedesign – Prime Four
hannesfritz
40
2.5k
Done Done
chrislema
182
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
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