現代フロントエンドに欠かせないwebpackとBabelを理解しよう

builderscon tokyo 2019の登壇資料
https://builderscon.io/tokyo/2019

Twitter
https://twitter.com/__sakito__

Transcript

1. ݱ୅ϑϩϯτΤϯυʹ͔ܽͤͳ͍
 XFCQBDLͱ#BCFMΛཧղ͠Α͏ʂ
   CVJMEFSTDPO
   UPLZP
   
2. /BNF
   
   
   
   
   4BLJUP
   .VLBJ
   5XJUUFS

   
   
   
   !@@TBLJUP@@
   $PNQBOZ
   
   
   
   
   $ZCP[V
   JOD
   

   
   
   
   'SPOUFOE
   &YQFSU
   5FBN "CPVU
   NF
3. w#BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ
   w#BCFMʹ͍ͭͯ
   wXFCQBDLʹ͍ͭͯ
   wXFCQBDL #BCFMͰ಺෦࣮૷Λ௥͍ͬͯ͘ "HFOEB
4. #BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ
5. &$."4DSJQUͱ5$ w+BWB4DSJQUʹ͸&$."4DSJQUͱ͍͏ݴޠ࢓༷͕͋Δ
   w͜ͷݴޠ࢓༷ΛܾΊ͍ͯΔҕһձ͕5$
 5FDIOJDBM
   $PNNJUUFF
   
   w&4 &4 Ҏ߱͸೥࣍ͰϦϦʔεΛߦͳ͍ͬͯ·͢
 &4
   
   &4
   
   ʜ
   wͰ͸ͲͷΑ͏ʹػೳΛܾΊ͍ͯΔͷ͔ʁ
6. &$."4DSJQUʹ͓͚Δஈ֊ͷ4UBHF w 4UBHF
   4USBXQFSTPO
   
 ΞΠσΟΞஈ֊
   w 4UBHF
   1SPQPTBM
   
 ࢓༷ͷχʔζɺ࢖༻ྫɺݒ೦఺ɺ໨తΛղઆ͢Δஈ֊
   w 4UBHF
   %SBGU
 ߏจɺηϚϯςΟοΫɺ"1*͕༻ҙͰ͖͕ͨɺ
 มߋͷՄೳੑ͕͋Δஈ֊
   w 4UBHF
   $BOEJEBUF
 &$."4DSJQU
   FEJUPST͔Βͷঝೝ͕ԼΓɺ
 ֎෦͔ΒͷϑΟʔυόοΫΛ΋Β͏ஈ֊
   w 4UBHF
   'JOJTIFE
 UFTUͷςετ͕׬ྃ͠ɺͭҎ্ͷϒϥ΢βͰ
 ࣮૷͞Εɺ&$."4DSJQU
   FEJUPST͔Β࢓༷ςΩετͷঝೝ͕ԼΓͨஈ֊
   w 5$ͷঝೝΛ௨Γɺਖ਼ࣜʹ&$."4DSJQUͷ࢓༷ʹ௥Ճ
7. &$."4DSJQUʹ͓͚Δஈ֊ͷ4UBHF w 4UBHF
   4USBXQFSTPO
   
 ΞΠσΟΞஈ֊
   w 4UBHF
   1SPQPTBM
   
 ࢓༷ͷχʔζɺ࢖༻ྫɺݒ೦఺ɺ໨తΛղઆ͢Δஈ֊
   w 4UBHF
   %SBGU
 ߏจɺηϚϯςΟοΫɺ"1*͕༻ҙͰ͖͕ͨɺ
 มߋͷՄೳੑ͕͋Δஈ֊
   w 4UBHF
   $BOEJEBUF
 &$."4DSJQU
   FEJUPST͔Βͷঝೝ͕ԼΓɺ
 ֎෦͔ΒͷϑΟʔυόοΫΛ΋Β͏ஈ֊
   w 4UBHF
   'JOJTIFE
 UFTUͷςετ͕׬ྃ͠ɺͭҎ্ͷϒϥ΢βͰ
 ࣮૷͞Εɺ&$."4DSJQU
   FEJUPST͔Β࢓༷ςΩετͷঝೝ͕ԼΓͨஈ֊
   w 5$ͷঝೝΛ௨Γɺਖ਼ࣜʹ&$."4DSJQUͷ࢓༷ʹ௥Ճ
8. +BWB4DSJQU
   &OHJOF w ৽͍͠+BWB4DSJQUͷػೳΛϒϥ΢βͰ࢖༻Ͱ͖Δ͔͸
 +BWB4DSJQU
   &OHJOF࣍ୈ
   w ϒϥ΢βʹΑͬͯ+BWB4DSJQU
   &OHJOF͸ҧ͏
   w $ISPNF
   
   7
   w 'JSFGPY
   
   4QJEFS.POLFZ
   w 4BGBSJ
   
   +BWB4DSJQU$PSF
   w &HFɺ*&
   
   
   $IBLSB
   w
   &EHF͸ݱࡏ7ʹมߋ͞ΕΔ༧ఆ
   w ϒϥ΢βόʔδϣϯʹΑͬͯ࢖༻Ͱ͖Δػೳʹ͕ࠩ
 ى͖Δ
10. #BCFMͱ͸ʁ
11. #BCFMͱ͸ʁ w+BWB4DSJQUͷDPNQJMFS
    w༷ʑͳ+BWB4DSJQUͷίʔυΛม׵Ͱ͖Δ
    w +49ߏจ΍5ZQF4DSJQU΋+BWB4DSJQUʹม׵Ͱ͖Δ
12. #BCFMͷ஀ੜ wݩʑ͸UPͱ͍͏໊લͩͬͨ
    w&4͔Β&4΁ίʔυΛม׵͢Δػೳ͔͍࣋ͬͯ͠ͳ͔ͬͨ
    w͔ͦ͜Β༷ʑͳཁ๬͕͋Γɺ#BCFMʹมߋ͞Εͨ
13. ͳͥ#BCFM͕ඞཁͳͷ͔ w࢖༻Ͱ͖Δ+BWB4DSJQU͸ϒϥ΢βʹΑͬͯҟͳΔ
    wศརͳػೳ͸࢖͍͍ͨ
    wͦ͜Ͱɺ
    ৽͍͠+BWB4DSJQUΛ
 ֤ϒϥ΢βͰ࢖༻Ͱ͖ΔΑ͏ʹ͢ΔͨΊ#BCFMΛ࢖༻͢Δ
14. #BCFMͷػೳ wߏจม׵
    wλʔήοτϒϥ΢βʹͳ͍؀ڥͷ1PMZpMMͷఏڙ
    
    wιʔείʔυม׵ DPEFNPET
15. #BCFM͸+BWB4DSJQUΛม׵͢Δ +BWB4DSJQU 5ZQF4DSJQU +49 +BWB4DSJQU
16. ରԠ͍ͯ͠ͳ͍ϒϥ΢β͕ଘࡏ
17. ֤ϒϥ΢βͰ࢖༻Ͱ͖Δߏจʹม׵
18. ֤ϒϥ΢βͰ࢖༻Ͱ͖Δߏจʹม׵ +BWB4DSJQU
19. ίʔυΛͲͷΑ͏ʹม׵͢Δͷ͔ʁ
20. #BCFMͷม׵ʹ͸ͭͷஈ֊͕͋Δ w1BSTJOH
    !CBCFMQBSTFS
 ιʔείʔυΛ"CTUSBDU
    4ZOUBY
    5SFF "45 ʹม׵
    w5SBOTGPSNBUJPO
 "45Λม׵͢Δɺ#BCFMͷϓϥάΠϯ͕
 ͜ͷ໾ׂΛ୲͍ͬͯΔ
    w$PEF
    (FOFSBU
    !CBCFMHFOFSBUPS
 "45Λιʔείʔυʹม׵͢Δ
21. #BCFMͷม׵ʹ͸ͭͷஈ֊͕͋Δ 1BSTJOH ιʔε "45 5SBOTGPSNBUJPO "45 $PEF
    (FOFSBU ιʔε
22. ࣮ࡍʹ#BCFMΛಈ͔͢
23. #BCFMΛ࣮ߦ͢ΔͨΊʹ༻ҙ͢Δ΋ͷ w!CBCFMDMJ
 ࣮ߦίϚϯυΛ༻ҙɺϑΝΠϧ΍σΟϨΫτϦͷ൑ఆΛ
 ߦͳ͓ͬͯΓɺ಺෦తʹ͸!CBCFMDPSFʹґଘ͍ͯ͠Δ
    w!CBCFMDPSF
 !CBCFMQBSTFS !CBCFMUSBWFSTF !CBCFMHFOFSBUPS
 ͳͲΛ࢖༻ͯ͠ɺઃఆͷಡΈࠐΈ΍ίʔυͷม׵ɺੜ੒Λߦ͏
24. #BCFMΛ࣮ߦͰ͖Δ؀ڥͷ४උ
25. #BCFMΛ࣮ߦ
26. ੜ੒͞Εͨ+BWB4DSJQU
27. ͳʹ΋มΘ͍ͬͯͳ͍
28. 1BSTJOH ιʔε "45 5SBOTGPSNBUJPO "45 $PEF
    (FOFSBU ιʔε ߦΘΕͨॲཧ
29. 1BSTJOH ߦΘΕͨॲཧ JOEFYKT "45 5SBOTGPSNBUJPO "45 $PEF
    (FOFSBU MJCJOEFYKT !CBCFMDMJ !CBCFMDPSF !CBCFMQBSTFS !CBCFMHFOFSBUPS 1BSTJOH
30. 1BSTJOH ߦΘΕͨॲཧ JOEFYKT "45 5SBOTGPSNBUJPO "45 $PEF
    (FOFSBU MJCJOEFYKT !CBCFMDMJ !CBCFMDPSF !CBCFMQBSTFS !CBCFMHFOFSBUPS 1BSTJOH
31. ߦΘΕͨॲཧ w!CBCFMDPSFʹ͸ιʔείʔυΛมߋ͢Δػೳ͕ͳ͍
    wίʔυΛ"45ʹม׵͠ɺͳʹ΋มߋΛՃ͑ͣʹ
 ࠶౓"45Λίʔυม׵ͯ͠ݩʹ໭ͬͨ
    wม׵͞Εͨ"45ʹରͯ͠มߋΛߦ͏ͷ͸ɺ
 #BCFM
    1MVHJOͷ໾ׂ
32. ࠶౓#BCFMΛಈ͔͢
33. #BCFMΛ࣮ߦ͢ΔͨΊʹ༻ҙ͢Δ΋ͷ w!CBCFMDMJ
 ࣮ߦίϚϯυΛ༻ҙɺϑΝΠϧ΍σΟϨΫτϦͷ൑ఆΛ
 ߦͳ͓ͬͯΓɺ಺෦తʹ͸!CBCFMDPSFʹґଘ͍ͯ͠Δ
    w!CBCFMDPSF
 !CBCFMQBSTFS !CBCFMUSBWFSTF !CBCFMHFOFSBUPS
 ͳͲΛ࢖༻ͯ͠ɺઃఆͷಡΈࠐΈ΍ίʔυͷม׵ɺੜ੒Λߦ͏ w#BCFM
    1MVHJOT
 ίʔυʹม׵ΛՃ͑Δɺࠓճ͸
    
 !CBCFMQMVHJOUSBOTGPSNBSSPXGVODUJPOTΛ࢖༻͢Δ
    w#BCFM
    1SFTFUT
 #BCFM
    1MVHJOͷηοτɺ!CBCFMQSFTFUFOW΍!CBCFMQSFTFUSFBDU
 ͳͲΛࢦ͢ɻࠓճ͸࢖༻͠ͳ͍
34. #BCFMΛ࣮ߦͰ͖Δ؀ڥͷ४උ
35. #BCFMΛ࣮ߦ
36. ੜ੒͞Εͨ+BWB4DSJQU
38. ߦΘΕͨॲཧ w !CBCFMQBSTFSͰ"45ม׵
    w ม׵͞Εͨ"45ʹ!CBCFMQMVHJOUSBOTGPSNBSSPXGVODUJPOT͕
 มߋΛՃ͑Δ
    w !CBCFMHFOFSBUPSͰ"45Λίʔυʹͨ͠΋ͷΛੜ੒
39. 1BSTJOH ߦΘΕͨॲཧ JOEFYKT "45 5SBOTGPSNBUJPO "45 $PEF
    (FOFSBU MJCJOEFYKT !CBCFMDMJ !CBCFMDPSF !CBCFMQBSTFS !CBCFMHFOFSBUPS 1BSTJOH !CBCFMQMVHJOUSBOTGPSNBSSPXGVODUJPOT
41. XFCQBDLͱ͸ʁ
42. XFCQBDLͱ͸ʁ wXFCQBDL͸Ϟδϡʔϧόϯυϥʔ
    w+BWB4DSJQU͚ͩͰ͸ͳ͘ɺJNHɺDTTͳͲ΋Ϟδϡʔϧ
    wͦΕΒͷґଘؔ܎Λղܾ͢Δ
    w༷ʑͳλʔήοτͰར༻Ͱ͖Δܗʹग़ྗ͢Δ
    w΄΅1MVHJOTγεςϜͰߏ੒͞Ε͍ͯΔ
43. ༷ʑͳλʔήοτ
44. XFCQBDLͱ͸ʁ
45. XFCQBDLͷ஀ੜ w$PNNPO+4Λϒϥ΢βʔ༻ʹม׵͢Δ
 ʮNPEVMFTXFCNBLFʯ͕͋ͬͨ
    w͜Εʹ$PEF
    4QMJUUJOHػೳΛ௥Ճ͢ΔఏҊΛ͕ͨ͠ɺ
 ड͚ೖΕΒΕͳ͔ͬͨ
    wͦͷͨΊNPEVMFTXFCNBLFΛ'PSLͯ͠ɺ
 ಠࣗػೳͷ௥ՃΛͨ͠΋ͷΛ
 XFCQBDLͱͯ͠ϦωʔϜ͠ɺϓϩδΣΫτʹ
46. XFCQBDLͷ஀ੜ
47. XFCQBDLͷ஀ੜ w̍ͭͷόϯυϥʔͱͯ͠։ൃΛଓ͚͍ͯͨͱ͜Ζ
 *OTUBHSBNͷϓϩδΣΫτͰ࢖༻͞Εɺ஫໨ΛཋͼΔ
    wͦͷޙ3FBDUʹؔ࿈͢Δ044Ͱ࢖༻͞Εɺ
 രൃతʹ࢖༻͞ΕΔΑ͏ʹ
    wࠓ͸3FBDU͚ͩͰ͸ͳ͘ɺ"OHVMBSɺ7VFͳͲΛ
 ѻ͏ࡍʹ΋࢖༻͞Ε͍ͯΔ
48. XFCQBDLͷ஀ੜ
49. XFCQBDLͷίϯηϓτ
50. $PODFQUT w &OUSZ
 ى఺ͱͳΔϑΝΠϧΛࢦఆ
    w 0VUQVU
 ॲཧ͕׬ྃͨ͠ϑΝΠϧΛग़ྗ͢Δ
    w -PBEFST
 ࢦఆϑΝΠϧʹ೚ҙͷॲཧΛՃ͑ΔɺͭͷλεΫ
    w 1MVHJOT
 XFCQBDLͷ༷ʑͳΠϕϯτΛIPPL͠ɺσʔλΛૢ࡞ͨ͠Γ
 ॲཧΛ࣮ߦͰ͖Δ
    w .PEF
 OPOF EFWFMPQNFOU QSPEVDUJPOΛࢦఆ͠ɺ
 NPEFʹԠͯ͡ɺύϑΥʔϚϯε࠷దԽ΍ѹॖͳͲΛߦ͏
    w #SPXTFS
    $PNQBUJCJMJUZ
 ϒϥ΢βͷޙํޓ׵ੑ

52. ࣮ࡍʹॲཧΛ௥͍͔͚ͯ಺෦࣮૷ΛΈ͍ͯ͘
53. ࣮ߦ؀ڥͷ४උ
54. ࣮ߦ؀ڥͷ४උ
55. ࣮ߦ؀ڥͷ४උ
56. ࣮ߦ wCJOXFCQBDLKTΛ࣮ߦ
    wͦͷதͰCJOXFCQBDLDMJΛ࣮ߦ͍ͯ͠Δ
    wͦͷͨΊɺXFCQBDLDMJͷΠϯετʔϧ΋ඞਢ
    wXFCQBDLDPOpHKTΛಡΈࠐΉ
57. XFCQBDLͷ಺෦Ͱ࢖༻͞Ε͍ͯΔॏཁͳϝιου
58. XFCQBDLDMJMJCVUJMTDPNQJMFSKT XFCQBDLͷύοέʔδΛఆٛ
59. XFCQBDLMJCXFCQBDLKT wXFCQBDL0QUJPOT"QQMZ QSPDFTT PQUJPOT
    DPNQJMFS Λ࣮ߦ
    w$PNQJMFS XFCQBDLMJC$PNQJMFSKT ΠϯελϯεΛੜ੒࣮ͯ͠ߦ
60. XFCQBDLMJC8FCQBDL0QUJPOT"QQMZKT wϓϥάΠϯΛద༻͍ͯ͘͠
61. XFCQBDLMJC$PNQJMFSKT
62. XFCQBDLMJC$PNQJMFSKT wఆٛݩ͸XFCQBDL5BQBCMF
    wXFCQBDLͷ
 ϓϥάΠϯΠϕϯτΛऔಘ͢Δ
63. XFCQBDLMJC$PNQJMFSKT wDPNQJMBUJPOΠϯελϯεΛ
 ੜ੒
    wIPPLTNBLFͰ
 ผͷϓϥάΠϯ΋ฒྻͰ
 ಈ͘Α͏ʹ
64. XFCQBDLMJC8FCQBDL0QUJPOT"QQMZKT wXFCQBDL0QUJPOT"QQMZ QSPDFTT PQUJPOT
    DPNQJMFS ʹ
 ໭ͬͯ͘Δ
    w&OUSZ0QUJPO1MVHJO͕࣮ߦ͞ΕΔ
65. XFCQBDLMJC&OUSZ0QUJPO1MVHJOKT ୯ҰͷFOUSZΛఆ͍ٛͯ͠ΔͷͰ
 4JOHMF&OUSZ1MVHJO͕ݺ͹ΕΔ
66. XFCQBDLMJC4JOHMF&OUSZ1MVHJOKT w BEE&OUSZϝιουͰ&OUSZ͔Β
 ґଘؔ܎Λදͨ͠ΠϯελϯεΛ ੜ੒
    w $PNQJMBUJPOBEE.PEVMF$IBJO Λ࣮ߦ
67. XFCQBDLMJC/PSNBM.PEVMF'BDUPSZKT
    wXFCQBDLFOIBODFESFTPMWFΛ࢖༻ͯ͠ɺSFRVFTUΛղܾ
    wXFCQBDLMJC3VMF4FUKTʹఆΊΒΕͨSVMFTΛॲཧ͢Δ
    wMPBEFSͷϦΫΤετΛղܾ͢Δ
    w/PSNBM.PEVMFͷΠϯελϯεΛੜ੒
68. XFCQBDLMJC/PSNBM.PEVMFKT wXFCQBDLMPBEFSSVOOFSΛ࢖༻ͯ͠ɺ
 MPBEFSͷॲཧΛద༻
    w͜͜ͰCBCFMMPBEFSͷॲཧ͕௥Ճ͞ΕΔ
    wXFCQBDL1BSTFSͰ1BSTF
    w1BSTFͷதͰɺґଘؔ܎ʹ௥Ճ
69. XFCQBDLMJC4JOHMF&OUSZ1MVHJOKT w BEE&OUSZϝιουͰ&OUSZ͔Β
 ґଘؔ܎Λදͨ͠ΠϯελϯεΛੜ੒
    w $PNQJMBUJPOBEE.PEVMF$IBJOΛ࣮ߦ
70. $PNQJMBUJPOBEE.PEVMF$IBJO wઌ΄ͲΠϯελϯεԽͨ͠ґଘؔ܎Λ%FQͱͯ͠ड͚औΔ
    wUIJTNPEVMF'BDUPSZͰґଘؔ܎Λऔಘ͢Δ
 OFX
    .BQ %FQ HFU
    w.PEVMF'BDUPSZDSFBUFͰNPEVMFΛฦ٫͢Δ
    w $PNQJMBUJPOBEE.PEVMF
    w ͢ͰʹίϯύΠϧ಺ʹNPEVMF͕͋Δ৔߹΍ɺ
 DBDIF͕͋Δ৔߹ʹ
    w $PNQJMBUJPOCVJME.PEVMF
    w NPEVMFΛϏϧυ͢Δ
71. ॲཧͷྲྀΕΛͬ͘͟ΓՄࢹԽ
72. ·ͱΊ
73. ·ͱΊ w#BCFM
    w༷ʑͳ+BWB4DSJQUͷίʔυΛม׵Ͱ͖Δ
    wXFCQBDL
    wϞδϡʔϧόϯυϥʔ
    wϑϩϯτΤϯυͱͯ͠਎ʹ͚͓͍ͭͯͯଛ͸ͳ͍஌ࣝ
    wத਎΋ֶΜͰͲΜͲΜ࢖͍౗͍͖ͯ͠·͠ΐ͏ʂ
74. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠