gotanda.js#3のLT資料です
WebpackʹΑΔਓྨڞ௨ ίϯϙʔωϯτܭը@joe_re
View Slide
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ରͷจࣈྻ ᶄτϥϯεύΠϧޙͷจࣈྻᶅґଘղܾํ๏
ɾϏϧυલɾϏϧυޙXFCQBDLWebpackͷexternalsͷࢦఆ
ɾϏϧυલɾϏϧυޙXFCQBDLͰϏϧυWebpackͷexternalsͷࢦఆᶃFYUFSOBMTରͷจࣈྻᶅґଘղܾํ๏ᶄτϥϯεύΠϧޙͷจࣈྻ
externalsࢦఆͰಘΔͷ• ϥΠϒϥϦͷόʔδϣϯࢦఆར༻ଆʹدͤΒΕΔ• ϏϧυޙͷjsΛఏڙͯ͠αΠζ͕͑ΒΕΔ
css loaderͷར༻IPHFSFBDUKTIPHFTDTT
css loaderͷར༻
css loaderʹΑͬͯಘΔͷ• styleίϯϙʔωϯτԽ͢Δ͜ͱͰʹؚΉ͜ͱͰɺݟͨͷΒ͖ͭΛ͑ΒΕΔ• ϩʔΧϧείʔϓηϨΫλ໊Λbase64ͰΤϯίʔυ͢Δ͜ͱʹΑ࣮ͬͯݱ͍ͯ͠ΔɻΫϥε໊͕มΘΔ͚ͩͰৄࡉ͕ߴ͘ͳΔ͜ͱͳ͍ (Αͬͯ֎෦͔ΒͷελΠϧͷଧͪফ͠ɾ্ॻ͖͕༰қʹͰ͖Δ)• ίϯϙʔωϯτ։ൃ࣌ʹηϨΫλͷিಥΛؾʹ͠ͳͯ͘ྑ͘ͳΔ
ίϯϙʔωϯτͷߏͷن൪֎ଆʹ֎෦͔Β͞ΕͨDMBTT/BNFͱɺϩʔΧϧείʔϓΛDMBTT/BNFʹ͢Δ൪ίϯϙʔωϯτͷ໊ΛDMBTT/BNFʹ͢ΔͦΕΑΓଆʹίϯϙʔωϯτͷ༰Λهड़͢Δ
نΛ࣋ͨͤΔ͜ͱͰɺ֎෦͔ΒͷελΠϧͷଧͪফ্͠ॻ͖͕͘͢͠ͳΔ
نʹ͍ͭͯ ઈࢍࢼߦࡨޡதͰ͢ɻɻ ྑ͍ϓϥΫςΟε͝ଘͰͨ͠Βੋඇڭ͍͑ͯͩ͘͞ʂ
ΤϯδχΞઈࢍืूதʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ