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による人類共通コンポーネント計画
Search
joe_re
March 11, 2016
Technology
1
8.8k
webpackによる人類共通コンポーネント計画
gotanda.js#3のLT資料です
joe_re
March 11, 2016
Tweet
Share
More Decks by joe_re
See All by joe_re
Building Public API with GraphQL
joere
3
100
Traversing the GraphQL AST and Calculating Query Costs
joere
0
1.1k
Real-Time applications with GraphQL
joere
0
260
Prisma2 with Graphql
joere
3
970
Go beyound static on Netlify
joere
1
310
Building Real-time Vue App
joere
4
4.6k
ReactNativeのAsyncStorageをNodeのReplから操作する
joere
0
330
Mock Native API in your E2E test
joere
2
1.2k
Data feching and caching on Apollo Client
joere
2
2.8k
Other Decks in Technology
See All in Technology
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
510
いまさら聞けない ABテスト入門
skmr2348
1
210
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
260
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
2
220
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
140
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.6k
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
150
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
120
pprof vs runtime/trace (FlightRecorder)
task4233
0
170
許しとアジャイル
jnuank
1
130
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
Featured
See All Featured
Navigating Team Friction
lara
189
15k
Code Review Best Practice
trishagee
72
19k
Thoughts on Productivity
jonyablonski
70
4.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Speed Design
sergeychernyshev
32
1.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Balancing Empowerment & Direction
lara
4
680
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Six Lessons from altMBA
skipperchong
28
4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing Experiences People Love
moore
142
24k
Transcript
WebpackʹΑΔ ਓྨڞ௨ ίϯϙʔωϯτܭը @joe_re
twitter: @joe_re github: @joe-re - ໊લ: ͡ΐ͏ - freeeͱ͍͏ձࣾͰಇ͍͍ͯ·͢ -
ࠓΫϥυڅ༩ܭࢉͬͯ·͢
React͕಄͠ɺੈք·͞ ʹେίϯϙʔωϯτ࣌ʂʂʂ
ͱ͜ΖͰͦͦ ίϯϙʔωϯτͬͯԿʁʁʁ
DOM͓Αͼ ৼΔ͍͕ఆٛ͞Εͨͷ
ίϯϙʔωϯτࢦʹ͓͚Δ ίϯϙʔωϯτ࠶ར༻Մೳ Ͱͳ͚ΕͳΒͳ͍
࠶ར༻Մೳͳίϯϙʔωϯτ Λ࡞Δʹʁ
ίϯϙʔωϯτ༩͑ΒΕͨ ΛϢʔβͷཧղͰ͖Δ View(DOM)ʹม͢Δɺ DOMมػʹప͢Δ
༩͑ΒΕ͕ͨಉ͡ͳͷʹɺ ҧ͏ϨϯμϦϯά݁Ռʹͳͬ ͍͚ͯͳ͍
ඳըͷݩʹͳΔͷੜϩδο Ϋܾͯ͠ίϯϙʔωϯτʹ ؚΜͰ͍͚ͳ͍ (ͦͷͨΊͷFlux)
ਓྨڞ௨ίϯϙʔωϯτͱ
͜͏͍͏ͷ
͜͏ݟ͑ͯ150ߦͷ ϩδοΫ͕٧·͍ͬͯΔ • ݺͼग़࣌͠ʹmax-minͷൣғܾΊΒΔ • ݄ͷબΛҰϲ݄લʹม͑ͨ࣌ʹɺଘࡏ͠ͳ ͍Λબ͠ͳ͍ (2016/3/31 ➡ 2016/2/29ʹͳΔ)
• ͳͲͳͲ
ڞ௨Խͯ͠ͲͷϓϩμΫτ͔ ΒͰݺΔΑ͏ʹ͍ͨ͠ʂ
ڞ௨ίϯϙʔωϯτͱ͢Δ͜ͱ Ͱ • ڞ௨Ͱ͏Α͏ͳinputɺselectͳͲʹ͓͍ͯɺݟ ͨૢ࡞ੑʹϓϩμΫτ͝ͱʹൃੜ͢ΔΒͭ ͖Λͳͤ͘Δ (freeeϒϥϯυͷΞϓϦέʔγϣϯʹ͓͚Δڞ௨ͷ ݟͨɺৼΔ͍Λ࣋ͨͤΔ) • ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτʹΑΔ։ൃͷޮ
Խ
ҙ • ਓྨڞ௨ͱ͍͍ͭͭɺ͜͜Ͱ͍͏ਓྨʹ 1ͭͷձࣾͷఏڙ͢ΔWebΞϓϦέʔγϣϯͱ ͦΕΛར༻͢ΔϢʔβ͔͠ଘࡏ͠·ͤΜ • Reactͷ༻Λલఏʹ͓͠·͢
Α͠ɺWebpackͩʂ
Webpackͱ • WebΞϓϦέʔγϣϯͷ੩తΞηοτͷϏϧυ πʔϧͰ͢ • JSͷτϥϯεύΠϧґଘղܾͪΖΜͰ͖ ·͢ • JS͚ͩͰͳ͘StyleImageͳͲͷϏϧυ͓Αͼ όϯυϧαϙʔτ͠·͢
࠶ར༻Մೳͳίϯϙʔωϯτ ͷཉ • τϥϯεύΠϧʹඞཁͳπʔϧͷόʔδϣϯཁٻͨ͘͠ͳ ͍(babelͷόʔδϣϯͱ͔) • ͱ͍͑༻͢ΔϥΠϒϥϦͷࡉ͔ͳόʔδϣϯ֤Ξϓ ϦέʔγϣϯͰཧ͍ͨ͠ • ݟͨἧ͍͑ͨ(styleఆؚٛΈ͍ͨ)
• ͱ͍͑ར༻ଆͰstyleͷඍௐ͍ͨ͠(styleͷଧͪফ͠ ্ॻ͖͕༰қͰ͋Δඞཁ͕͋Δ)
ͬ͘͟Γํ • τϥϯεύΠϧޙͷjsΛఏڙ͢Δ • ༻͢ΔϥΠϒϥϦexternalsʹࢦఆ͢Δ • css loaderΛ͍ɺstyleఆٛΛϩʔΧϧείʔ ϓͰ࣋ͨͤΔ
Webpackͷexternalsͷࢦఆ
Webpackͷexternalsͷࢦఆ ᶃFYUFSOBMTରͷจࣈྻ ᶄτϥϯεύΠϧޙͷจࣈྻ ᶅґଘղܾํ๏
ɾϏϧυલ ɾϏϧυޙ XFCQBDL Webpackͷexternalsͷࢦఆ
ɾϏϧυલ ɾϏϧυޙ XFCQBDLͰϏϧυ Webpackͷexternalsͷࢦఆ ᶃFYUFSOBMTରͷจࣈྻ ᶅґଘղܾํ๏ ᶄτϥϯεύΠϧޙͷจࣈྻ
externalsࢦఆͰಘΔͷ • ϥΠϒϥϦͷόʔδϣϯࢦఆར༻ଆʹدͤ ΒΕΔ • ϏϧυޙͷjsΛఏڙͯ͠αΠζ͕͑ΒΕΔ
css loaderͷར༻ IPHFSFBDUKT IPHFTDTT
css loaderͷར༻
css loaderʹΑͬͯಘΔͷ • styleίϯϙʔωϯτԽ͢Δ͜ͱͰʹؚΉ͜ͱͰɺݟͨͷ Β͖ͭΛ͑ΒΕΔ • ϩʔΧϧείʔϓηϨΫλ໊Λbase64ͰΤϯίʔυ͢Δ͜ͱ ʹΑ࣮ͬͯݱ͍ͯ͠ΔɻΫϥε໊͕มΘΔ͚ͩͰৄࡉ͕ߴ͘ͳ Δ͜ͱͳ͍ (Αͬͯ֎෦͔ΒͷελΠϧͷଧͪফ͠ɾ্ॻ͖͕༰қʹͰ͖Δ)
• ίϯϙʔωϯτ։ൃ࣌ʹηϨΫλͷিಥΛؾʹ͠ͳͯ͘ྑ͘ͳ Δ
ίϯϙʔωϯτͷߏͷن ൪֎ଆʹ֎෦͔Β͞ΕͨDMBTT/BNFͱɺϩʔΧϧείʔϓΛDMBTT/BNFʹ͢Δ ൪ίϯϙʔωϯτͷ໊ΛDMBTT/BNFʹ͢Δ ͦΕΑΓଆʹίϯϙʔωϯτͷ༰Λهड़͢Δ
نΛ࣋ͨͤΔ͜ͱͰɺ ֎෦͔ΒͷελΠϧͷ ଧͪফ্͠ॻ͖͕ ͘͢͠ͳΔ
نʹ͍ͭͯ ઈࢍࢼߦࡨޡதͰ͢ɻɻ ྑ͍ϓϥΫςΟε͝ଘͰ͠ ͨΒੋඇڭ͍͑ͯͩ͘͞ʂ
ΤϯδχΞઈࢍืूதʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ