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.6k
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
85
Traversing the GraphQL AST and Calculating Query Costs
joere
0
1k
Real-Time applications with GraphQL
joere
0
230
Prisma2 with Graphql
joere
3
940
Go beyound static on Netlify
joere
1
280
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
S3 Tables を図解でやさしくおさらい~基本から QuickSight 連携まで/s3-tables-illustrated-basics-quicksight
emiki
1
330
データ戦略部門 紹介資料
sansan33
PRO
1
3.1k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
38k
Contract One Dev Group 紹介資料
sansan33
PRO
0
6k
Scale Security Programs with Scorecarding
ramimac
0
430
金融システムをモダナイズするためのAmazon Elastic Kubernetes Service(EKS)ノウハウ大全
daitak
0
120
MCP で繋ぐ Figma とデザインシステム〜LLM を使った UI 実装のリアル〜
kimuson
2
1.3k
技術書典18結果報告
mutsumix
2
180
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!
martin_lover
0
160
AIコードエディタは開発を変えるか?Cursorをチームに導入して1ヶ月経った本音
ota1022
1
700
プラットフォームとしての Datadog / Datadog as Platforms
aoto
PRO
1
340
Featured
See All Featured
It's Worth the Effort
3n
184
28k
Building an army of robots
kneath
306
45k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Speed Design
sergeychernyshev
30
970
Designing for Performance
lara
608
69k
Raft: Consensus for Rubyists
vanstee
137
7k
Writing Fast Ruby
sferik
628
61k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Code Reviewing Like a Champion
maltzj
523
40k
Six Lessons from altMBA
skipperchong
28
3.8k
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ʹ͢Δ ͦΕΑΓଆʹίϯϙʔωϯτͷ༰Λهड़͢Δ
نΛ࣋ͨͤΔ͜ͱͰɺ ֎෦͔ΒͷελΠϧͷ ଧͪফ্͠ॻ͖͕ ͘͢͠ͳΔ
نʹ͍ͭͯ ઈࢍࢼߦࡨޡதͰ͢ɻɻ ྑ͍ϓϥΫςΟε͝ଘͰ͠ ͨΒੋඇڭ͍͑ͯͩ͘͞ʂ
ΤϯδχΞઈࢍืूதʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ