Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webpack the module bundler

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Jinny You Jinny You
August 08, 2018
Programming
90
0

Webpack the module bundler

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

Avatar for Jinny You

Jinny You

August 08, 2018

More Decks by Jinny You

See All by Jinny You
나의 오픈소스 이야기 : 한 줄의 코드에서 글로벌 애니메이션 엔진까지
Avatar for Jinny You tinyjin
0
34
Next Gen Lottie: Powering Motion Graphics Across the Apple Ecosystem
Avatar for Jinny You tinyjin
0
30
디자이너와 개발자가 자주 겪는 Lottie 핸드오프 FAQ - Figma Config Watch Party Seoul
Avatar for Jinny You tinyjin
0
150
인디 앱 개발자와 Flutter
Avatar for Jinny You tinyjin
0
560
모던 웹 기술로 C++ 렌더링 엔진 테스트 자동화하기
Avatar for Jinny You tinyjin
0
99
그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지
Avatar for Jinny You tinyjin
0
540
韩国的打卡地：你喜欢海边吗？
Avatar for Jinny You tinyjin
0
87
LottieFiles로 시작하는 빠르고 효율적인 애니메이션 핸드오프
Avatar for Jinny You tinyjin
0
130
エンジニアが見つめるLottieアニメーション
Avatar for Jinny You tinyjin
0
150

Other Decks in Programming

See All in Programming
進化を続けるGo toolsの現在地 / The Current State of Ever-Evolving Go Tools
Avatar for hond hond0413
0
200
仕様駆動開発の消費期限
Avatar for watany watany
20
8k
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
Avatar for k.goto gotok365
3
2.8k
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
Avatar for sumihiro3 sumihiro3
1
680
変わらないものが、変わるものを決める — 意図駆動開発 × イベントソーシング × イミュータブル | What Doesn't Change Decides What Can — IDD × Event Sourcing × Immutability
Avatar for Tomohisa Takaoka tomohisa
0
1.5k
わからない話を追いかけたら、プログラミング言語を作る側にいた
Avatar for ydah ydah
3
490
AI時代のPHPer生存戦略 ～「言語、もうなんでもよくない？」に本気で向き合う～
Avatar for viviON vivion
0
320
Go言語とトイモデルで学ぶTransformerの気持ち / fukuokago23-transformer
Avatar for monochromegane monochromegane
0
170
「寝てても仕事が進む」Claude Codeで組む第二の脳
Avatar for t-fujita24 tomoyafujita2016
0
320
Claude CodeとAgentCore Gatewayを繋ぐ際の認証認可 / Authentication and authorization when connecting Claude Code with AgentCore Gateway
Avatar for Har1101 har1101
2
270
これって Effect でできたのでは? / TSKaigi Mashup Kansai #2
Avatar for Susisu susisu
0
150
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
560

Featured

See All Featured
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
240
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
470
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
200
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
400
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
240
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
1
34k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
260

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