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
From RequireJS to Webpack
Search
RIDI
November 03, 2017
Technology
3
820
From RequireJS to Webpack
발표자: 스토어팀 조규진
RIDI
November 03, 2017
Tweet
Share
More Decks by RIDI
See All by RIDI
원격 근무 팀 운영 경험 공유
ridi
0
2.2k
SVG Icon Design Guide
ridi
2
3.7k
빠르게 훑어보는 리디페이 백엔드 개발기
ridi
2
5k
Next.js는 정말 zero config였다.
ridi
0
2.1k
3일 걸릴 것 같던 구매목록 다운로드는 왜 3주가 걸렸을까?
ridi
0
440
원격으로 한 달 일해보니
ridi
0
1.4k
리디북스 앱에 S Pen Remote 연동하기
ridi
2
2.7k
UI 라이브러리 개발기
ridi
1
2.6k
테스트 환경 개선하기
ridi
8
3.5k
Other Decks in Technology
See All in Technology
AI とペアプロしてわかった 3 つのヒューマンエラー
takahiroikegawa
1
510
libsyncrpcってなに?
uhyo
0
250
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
3
830
AWS と定理証明 〜ポリシー言語 Cedar 開発の舞台裏〜 #fp_matsuri / FP Matsuri 2025
ytaka23
6
740
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.6k
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
6.1k
MCPを利用して自然言語で3Dプリントしてみよう!
hamadakoji
0
1.2k
從開發到架構設計的可觀測性實踐
philipz
0
190
キャッシュレス決済のプロダクトから決済基盤への進化
b1a9id
0
220
kintone開発組織のDevOpsへの移り変わりと実践
ueokande
1
280
「伝える」を加速させるCursor術
naomix
0
320
バクラクのモノレポにおける AI Coding のための環境整備と {Roo,Claude} Code活用事例 / AI Coding in Bakuraku's Monorepo: Environment Setup & Case Studies with {Roo, Claude} Code
upamune
7
2.9k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
92
6.1k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Building Adaptive Systems
keathley
42
2.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Building Applications with DynamoDB
mza
95
6.4k
The Cost Of JavaScript in 2023
addyosmani
49
8.3k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Code Review Best Practice
trishagee
68
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Gamification - CAS2011
davidbonilla
81
5.3k
Transcript
From RequireJS To Webpack झషয ઑӏ
• ݽٚ ݽٕ ੌ • ױਤ ࠂ ઁѢо ਬ܂
ঋ • ࢲ ࠽٘ೞ۰ݶ concat ೧ঠೠ (dependency ҅ X) • ࢜۽ بੑೠ Vue.js ਊ ಕח webpackਵ۽ ࠽٘ ⟶ ӝઓ ݽٕҗ ഐജ ө۽
• ݽٕ dependency ӝળਵ۽ ߣٜ • babel ١ নೠ loaderܳ
ా೧ ߣٜ җীࢲ ߸ഋ ਊ оמ webpack
߄Լࠁ~ 7 زউ ࢲ ݽٚ JS ࣻ
• Bower ઁѢ && webpack && ES6 زदী ਊ •
झప పझ݅ 3ߣ… ೧ب ೧ب ࠛউೣ • ߓನ റ উ٘۽٘ীࢲ ۽٘ ز ী۞ • webpack → Bower ઁѢ → ES6 ࣽਵ۽ ਊ೮ݶ?
• ݽٕਸ ղ ۽ • ES6
ߓನ റ
ҳ ߡ উ٘۽٘ জ, ۨ݃ ࠳ۄীࢲ झ݀ ز উ ೣ
• ES3ীࢲ ES ডযܳ foo.keyword, {keyword: ‘foo’} ৬ э ࢎਊೡ
ࣻ হ • ۨ݃ח উ٘۽٘ 4.0.x ੋؘ ES3 babel-polyfill VueJS
Babel plugin ਊ UglifyJSPluginীࢲ द quote ઁѢೞ ঋب۾ ২࣌ ୶о
• moduleIdо ҅ࣘ ߸҃غח ޙઁ • ࠽٘ റ ੌ ױਤ۽
ߓನೞח दझమ (ߣ deployer بੑ ) Ѣ ߓನೞח Ѣ ݏইਃ?
https://webpack.js.org/guides/caching/#module-identifiers
moduleIdী ࢚҃۽৬ hash ਊ webpack ࢸ ࠁ݅ vendors.webpack.js ܻ࠙
ৈ ࢚ ޅೠ ੌ ߸҃ؽ Ѣ ߸҃ػ Ѣ ݏইਃ? •
chunkIdب ҅ࣘ ߸҃
chunkIdب ܴਵ۽ ߸҃
None
• async import • ridibooks.com / static.ridibooks.com • xxx.dev.ridi.io •
config.local.php $STATIC_URL ଵઑ೧ࢲ webpack.local.js ࢤࢿ
• ಣӐ ࠽٘ दр 20s (Babel cache ਊػ ࢚క) •
۽ UglifyJSPluginীࢲ ো
࠙ݺ ҕध ޙࢲী parallel, cache ২࣌ חؘ..
• webpack ҕधޙࢲীࢲ п plugin repo README.md ࢎਊ • ߡ
ҙ҅হ ୭न ழਵ۽ оઉ১
߹ب ۞Ӓੋ ਊ 10ੌ ী UglifyJSPlugin v1.0.0 ܾܻૉ
• webpack ߣٜ݂ ٸޙী ѐߊ दীب sourcemap ਃ • cheap-module-eval-source-map
খਵ۽..
• ԇؘӝ݅ ES6ੋ ݽٕٜ refactor • VueJS ਊ ഛ (GNB,
࢚ࣁಕ दܻૉ ܻझ ١) • jQuery ୭ࣗച…. • ࣘੋ ѐߊജ҃ ѐࢶ
хࢎפ