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.7k
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
93
Traversing the GraphQL AST and Calculating Query Costs
joere
0
1.1k
Real-Time applications with GraphQL
joere
0
240
Prisma2 with Graphql
joere
3
960
Go beyound static on Netlify
joere
1
290
Building Real-time Vue App
joere
4
4.6k
ReactNativeのAsyncStorageをNodeのReplから操作する
joere
0
320
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
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
1
310
AWS re:Inforce 2025 re:Cap Update Pickup & AWS Control Tower の運用における考慮ポイント
htan
1
210
Lambda management with ecspresso and Terraform
ijin
2
140
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
260
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
3
310
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
740
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
1
260
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
190
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
140
大規模イベントに向けた ABEMA アーキテクチャの遍歴 ~ Platform Strategy 詳細解説 ~
nagapad
0
190
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
1.8k
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
430
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Designing Experiences People Love
moore
142
24k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Bash Introduction
62gerente
614
210k
Side Projects
sachag
455
43k
Designing for humans not robots
tammielis
253
25k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Being A Developer After 40
akosma
90
590k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How to Ace a Technical Interview
jacobian
278
23k
Making Projects Easy
brettharned
117
6.3k
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ʹ͢Δ ͦΕΑΓଆʹίϯϙʔωϯτͷ༰Λهड़͢Δ
نΛ࣋ͨͤΔ͜ͱͰɺ ֎෦͔ΒͷελΠϧͷ ଧͪফ্͠ॻ͖͕ ͘͢͠ͳΔ
نʹ͍ͭͯ ઈࢍࢼߦࡨޡதͰ͢ɻɻ ྑ͍ϓϥΫςΟε͝ଘͰ͠ ͨΒੋඇڭ͍͑ͯͩ͘͞ʂ
ΤϯδχΞઈࢍืूதʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ