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

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

Twitter
https://twitter.com/__sakito__

Transcript

1. ݱ୅ϑϩϯτΤϯυʹ͔ܽͤͳ͍

   XFCQBDLͱ#BCFMΛཧղ͠Α͏ʂ
   CVJMEFSTDPOUPLZP
   

   View Slide

2. /BNF
   4BLJUP.VLBJ
   5XJUUFS

   !@@TBLJUP@@
   $PNQBOZ
   $ZCP[VJOD

   'SPOUFOE&YQFSU5FBN
   "CPVUNF
   

   View Slide

3. w#BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ
   w#BCFMʹ͍ͭͯ
   wXFCQBDLʹ͍ͭͯ
   wXFCQBDL#BCFMͰ಺෦࣮૷Λ௥͍ͬͯ͘
   "HFOEB
   

   View Slide

4. #BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ
   

   View Slide

5. &$."4DSJQUͱ5$
   w+BWB4DSJQUʹ͸&$."4DSJQUͱ͍͏ݴޠ࢓༷͕͋Δ
   w͜ͷݴޠ࢓༷ΛܾΊ͍ͯΔҕһձ͕5$

   5FDIOJDBM$PNNJUUFF
   
   w&4 &4
   Ҏ߱͸೥࣍ͰϦϦʔεΛߦͳ͍ͬͯ·͢

   &4&4ʜ
   
   wͰ͸ͲͷΑ͏ʹػೳΛܾΊ͍ͯΔͷ͔ʁ
   

   View Slide

6. &$."4DSJQUʹ͓͚Δஈ֊ͷ4UBHF
   w 4UBHF4USBXQFSTPO

   ΞΠσΟΞஈ֊
   w 4UBHF1SPQPTBM

   ࢓༷ͷχʔζɺ࢖༻ྫɺݒ೦఺ɺ໨తΛղઆ͢Δஈ֊
   w 4UBHF%SBGU

   ߏจɺηϚϯςΟοΫɺ"1*͕༻ҙͰ͖͕ͨɺ

   มߋͷՄೳੑ͕͋Δஈ֊
   w 4UBHF$BOEJEBUF

   &$."4DSJQUFEJUPST͔Βͷঝೝ͕ԼΓɺ

   ֎෦͔ΒͷϑΟʔυόοΫΛ΋Β͏ஈ֊
   w 4UBHF'JOJTIFE

   UFTUͷςετ͕׬ྃ͠ɺͭҎ্ͷϒϥ΢βͰ

   ࣮૷͞Εɺ&$."4DSJQUFEJUPST͔Β࢓༷ςΩετͷঝೝ͕ԼΓͨஈ֊
   w 5$ͷঝೝΛ௨Γɺਖ਼ࣜʹ&$."4DSJQUͷ࢓༷ʹ௥Ճ
   

   View Slide

7. &$."4DSJQUʹ͓͚Δஈ֊ͷ4UBHF
   w 4UBHF4USBXQFSTPO

   ΞΠσΟΞஈ֊
   w 4UBHF1SPQPTBM

   ࢓༷ͷχʔζɺ࢖༻ྫɺݒ೦఺ɺ໨తΛղઆ͢Δஈ֊
   w 4UBHF%SBGU

   ߏจɺηϚϯςΟοΫɺ"1*͕༻ҙͰ͖͕ͨɺ

   มߋͷՄೳੑ͕͋Δஈ֊
   w 4UBHF$BOEJEBUF

   &$."4DSJQUFEJUPST͔Βͷঝೝ͕ԼΓɺ

   ֎෦͔ΒͷϑΟʔυόοΫΛ΋Β͏ஈ֊
   w 4UBHF'JOJTIFE

   UFTUͷςετ͕׬ྃ͠ɺͭҎ্ͷϒϥ΢βͰ

   ࣮૷͞Εɺ&$."4DSJQUFEJUPST͔Β࢓༷ςΩετͷঝೝ͕ԼΓͨஈ֊
   w 5$ͷঝೝΛ௨Γɺਖ਼ࣜʹ&$."4DSJQUͷ࢓༷ʹ௥Ճ
   

   View Slide

8. +BWB4DSJQU&OHJOF
   w ৽͍͠+BWB4DSJQUͷػೳΛϒϥ΢βͰ࢖༻Ͱ͖Δ͔͸

   +BWB4DSJQU&OHJOF࣍ୈ
   w ϒϥ΢βʹΑͬͯ+BWB4DSJQU&OHJOF͸ҧ͏
   w $ISPNF7
   w 'JSFGPY4QJEFS.POLFZ
   w 4BGBSJ+BWB4DSJQU$PSF
   w &HFɺ*&$IBLSB
   w &EHF͸ݱࡏ7ʹมߋ͞ΕΔ༧ఆ
   w ϒϥ΢βόʔδϣϯʹΑͬͯ࢖༻Ͱ͖Δػೳʹ͕ࠩ

   ى͖Δ
   

   View Slide

9. View Slide

10. #BCFMͱ͸ʁ
    

    View Slide

11. #BCFMͱ͸ʁ
    w+BWB4DSJQUͷDPNQJMFS
    w༷ʑͳ+BWB4DSJQUͷίʔυΛม׵Ͱ͖Δ
    w +49ߏจ΍5ZQF4DSJQU΋+BWB4DSJQUʹม׵Ͱ͖Δ
    

    View Slide

12. #BCFMͷ஀ੜ
    wݩʑ͸UPͱ͍͏໊લͩͬͨ
    w&4͔Β&4΁ίʔυΛม׵͢Δػೳ͔͍࣋ͬͯ͠ͳ͔ͬͨ
    w͔ͦ͜Β༷ʑͳཁ๬͕͋Γɺ#BCFMʹมߋ͞Εͨ
    

    View Slide

13. ͳͥ#BCFM͕ඞཁͳͷ͔
    w࢖༻Ͱ͖Δ+BWB4DSJQU͸ϒϥ΢βʹΑͬͯҟͳΔ
    wศརͳػೳ͸࢖͍͍ͨ
    wͦ͜Ͱɺ৽͍͠+BWB4DSJQUΛ

    ֤ϒϥ΢βͰ࢖༻Ͱ͖ΔΑ͏ʹ͢ΔͨΊ#BCFMΛ࢖༻͢Δ
    

    View Slide

14. #BCFMͷػೳ
    wߏจม׵
    wλʔήοτϒϥ΢βʹͳ͍؀ڥͷ1PMZpMMͷఏڙ
    wιʔείʔυม׵ DPEFNPET
    
    

    View Slide

15. #BCFM͸+BWB4DSJQUΛม׵͢Δ
    +BWB4DSJQU
    5ZQF4DSJQU
    +49
    +BWB4DSJQU
    

    View Slide

16. ରԠ͍ͯ͠ͳ͍ϒϥ΢β͕ଘࡏ
    

    View Slide

17. ֤ϒϥ΢βͰ࢖༻Ͱ͖Δߏจʹม׵
    

    View Slide

18. ֤ϒϥ΢βͰ࢖༻Ͱ͖Δߏจʹม׵
    +BWB4DSJQU
    

    View Slide

19. ίʔυΛͲͷΑ͏ʹม׵͢Δͷ͔ʁ
    

    View Slide

20. #BCFMͷม׵ʹ͸ͭͷஈ֊͕͋Δ
    w1BSTJOH!CBCFMQBSTFS

    ιʔείʔυΛ"CTUSBDU4ZOUBY5SFF "45
    ʹม׵
    w5SBOTGPSNBUJPO

    "45Λม׵͢Δɺ#BCFMͷϓϥάΠϯ͕

    ͜ͷ໾ׂΛ୲͍ͬͯΔ
    w$PEF(FOFSBU!CBCFMHFOFSBUPS

    "45Λιʔείʔυʹม׵͢Δ
    

    View Slide

21. #BCFMͷม׵ʹ͸ͭͷஈ֊͕͋Δ
    1BSTJOH
    ιʔε "45
    5SBOTGPSNBUJPO
    "45
    $PEF(FOFSBU
    ιʔε
    

    View Slide

22. ࣮ࡍʹ#BCFMΛಈ͔͢
    

    View Slide

23. #BCFMΛ࣮ߦ͢ΔͨΊʹ༻ҙ͢Δ΋ͷ
    w!CBCFMDMJ

    ࣮ߦίϚϯυΛ༻ҙɺϑΝΠϧ΍σΟϨΫτϦͷ൑ఆΛ

    ߦͳ͓ͬͯΓɺ಺෦తʹ͸!CBCFMDPSFʹґଘ͍ͯ͠Δ
    w!CBCFMDPSF

    !CBCFMQBSTFS !CBCFMUSBWFSTF !CBCFMHFOFSBUPS

    ͳͲΛ࢖༻ͯ͠ɺઃఆͷಡΈࠐΈ΍ίʔυͷม׵ɺੜ੒Λߦ͏
    

    View Slide

24. #BCFMΛ࣮ߦͰ͖Δ؀ڥͷ४උ
    

    View Slide

25. #BCFMΛ࣮ߦ
    

    View Slide

26. ੜ੒͞Εͨ+BWB4DSJQU
    

    View Slide

27. ͳʹ΋มΘ͍ͬͯͳ͍
    

    View Slide

28. 1BSTJOH
    ιʔε "45
    5SBOTGPSNBUJPO
    "45
    $PEF(FOFSBU
    ιʔε
    ߦΘΕͨॲཧ
    

    View Slide

29. 1BSTJOH
    ߦΘΕͨॲཧ
    JOEFYKT "45
    5SBOTGPSNBUJPO
    "45
    $PEF(FOFSBU
    MJCJOEFYKT
    !CBCFMDMJ
    !CBCFMDPSF
    !CBCFMQBSTFS !CBCFMHFOFSBUPS
    1BSTJOH
    

    View Slide

30. 1BSTJOH
    ߦΘΕͨॲཧ
    JOEFYKT "45
    5SBOTGPSNBUJPO
    "45
    $PEF(FOFSBU
    MJCJOEFYKT
    !CBCFMDMJ
    !CBCFMDPSF
    !CBCFMQBSTFS !CBCFMHFOFSBUPS
    1BSTJOH
    

    View Slide

31. ߦΘΕͨॲཧ
    w!CBCFMDPSFʹ͸ιʔείʔυΛมߋ͢Δػೳ͕ͳ͍
    wίʔυΛ"45ʹม׵͠ɺͳʹ΋มߋΛՃ͑ͣʹ

    ࠶౓"45Λίʔυม׵ͯ͠ݩʹ໭ͬͨ
    wม׵͞Εͨ"45ʹରͯ͠มߋΛߦ͏ͷ͸ɺ

    #BCFM1MVHJOͷ໾ׂ
    

    View Slide

32. ࠶౓#BCFMΛಈ͔͢
    

    View Slide

33. #BCFMΛ࣮ߦ͢ΔͨΊʹ༻ҙ͢Δ΋ͷ
    w!CBCFMDMJ

    ࣮ߦίϚϯυΛ༻ҙɺϑΝΠϧ΍σΟϨΫτϦͷ൑ఆΛ

    ߦͳ͓ͬͯΓɺ಺෦తʹ͸!CBCFMDPSFʹґଘ͍ͯ͠Δ
    w!CBCFMDPSF

    !CBCFMQBSTFS !CBCFMUSBWFSTF !CBCFMHFOFSBUPS

    ͳͲΛ࢖༻ͯ͠ɺઃఆͷಡΈࠐΈ΍ίʔυͷม׵ɺੜ੒Λߦ͏
    w#BCFM1MVHJOT

    ίʔυʹม׵ΛՃ͑Δɺࠓճ͸

    !CBCFMQMVHJOUSBOTGPSNBSSPXGVODUJPOTΛ࢖༻͢Δ
    w#BCFM1SFTFUT

    #BCFM1MVHJOͷηοτɺ!CBCFMQSFTFUFOW΍!CBCFMQSFTFUSFBDU

    ͳͲΛࢦ͢ɻࠓճ͸࢖༻͠ͳ͍
    

    View Slide

34. #BCFMΛ࣮ߦͰ͖Δ؀ڥͷ४උ
    

    View Slide

35. #BCFMΛ࣮ߦ
    

    View Slide

36. ੜ੒͞Εͨ+BWB4DSJQU
    

    View Slide

37. View Slide

38. ߦΘΕͨॲཧ
    w !CBCFMQBSTFSͰ"45ม׵
    w ม׵͞Εͨ"45ʹ!CBCFMQMVHJOUSBOTGPSNBSSPXGVODUJPOT͕

    มߋΛՃ͑Δ
    w !CBCFMHFOFSBUPSͰ"45Λίʔυʹͨ͠΋ͷΛੜ੒
    

    View Slide

39. 1BSTJOH
    ߦΘΕͨॲཧ
    JOEFYKT "45
    5SBOTGPSNBUJPO
    "45
    $PEF(FOFSBU
    MJCJOEFYKT
    !CBCFMDMJ
    !CBCFMDPSF
    !CBCFMQBSTFS !CBCFMHFOFSBUPS
    1BSTJOH
    !CBCFMQMVHJOUSBOTGPSNBSSPXGVODUJPOT
    

    View Slide

40. View Slide

41. XFCQBDLͱ͸ʁ
    

    View Slide

42. XFCQBDLͱ͸ʁ
    wXFCQBDL͸Ϟδϡʔϧόϯυϥʔ
    w+BWB4DSJQU͚ͩͰ͸ͳ͘ɺJNHɺDTTͳͲ΋Ϟδϡʔϧ
    wͦΕΒͷґଘؔ܎Λղܾ͢Δ
    w༷ʑͳλʔήοτͰར༻Ͱ͖Δܗʹग़ྗ͢Δ
    w΄΅1MVHJOTγεςϜͰߏ੒͞Ε͍ͯΔ
    

    View Slide

43. ༷ʑͳλʔήοτ
    

    View Slide

44. XFCQBDLͱ͸ʁ
    

    View Slide

45. XFCQBDLͷ஀ੜ
    w$PNNPO+4Λϒϥ΢βʔ༻ʹม׵͢Δ

    ʮNPEVMFTXFCNBLFʯ͕͋ͬͨ
    w͜Εʹ$PEF4QMJUUJOHػೳΛ௥Ճ͢ΔఏҊΛ͕ͨ͠ɺ

    ड͚ೖΕΒΕͳ͔ͬͨ
    wͦͷͨΊNPEVMFTXFCNBLFΛ'PSLͯ͠ɺ

    ಠࣗػೳͷ௥ՃΛͨ͠΋ͷΛ

    XFCQBDLͱͯ͠ϦωʔϜ͠ɺϓϩδΣΫτʹ
    

    View Slide

46. XFCQBDLͷ஀ੜ
    

    View Slide

47. XFCQBDLͷ஀ੜ
    w̍ͭͷόϯυϥʔͱͯ͠։ൃΛଓ͚͍ͯͨͱ͜Ζ

    *OTUBHSBNͷϓϩδΣΫτͰ࢖༻͞Εɺ஫໨ΛཋͼΔ
    wͦͷޙ3FBDUʹؔ࿈͢Δ044Ͱ࢖༻͞Εɺ

    രൃతʹ࢖༻͞ΕΔΑ͏ʹ
    wࠓ͸3FBDU͚ͩͰ͸ͳ͘ɺ"OHVMBSɺ7VFͳͲΛ

    ѻ͏ࡍʹ΋࢖༻͞Ε͍ͯΔ
    

    View Slide

48. XFCQBDLͷ஀ੜ
    

    View Slide

49. XFCQBDLͷίϯηϓτ
    

    View Slide

50. $PODFQUT
    w &OUSZ

    ى఺ͱͳΔϑΝΠϧΛࢦఆ
    w 0VUQVU

    ॲཧ͕׬ྃͨ͠ϑΝΠϧΛग़ྗ͢Δ
    w -PBEFST

    ࢦఆϑΝΠϧʹ೚ҙͷॲཧΛՃ͑ΔɺͭͷλεΫ
    w 1MVHJOT

    XFCQBDLͷ༷ʑͳΠϕϯτΛIPPL͠ɺσʔλΛૢ࡞ͨ͠Γ

    ॲཧΛ࣮ߦͰ͖Δ
    w .PEF

    OPOF EFWFMPQNFOU QSPEVDUJPOΛࢦఆ͠ɺ

    NPEFʹԠͯ͡ɺύϑΥʔϚϯε࠷దԽ΍ѹॖͳͲΛߦ͏
    w #SPXTFS$PNQBUJCJMJUZ

    ϒϥ΢βͷޙํޓ׵ੑ

    

    View Slide

51. View Slide

52. ࣮ࡍʹॲཧΛ௥͍͔͚ͯ಺෦࣮૷ΛΈ͍ͯ͘
    

    View Slide

53. ࣮ߦ؀ڥͷ४උ
    

    View Slide

54. ࣮ߦ؀ڥͷ४උ
    

    View Slide

55. ࣮ߦ؀ڥͷ४උ
    

    View Slide

56. ࣮ߦ
    wCJOXFCQBDLKTΛ࣮ߦ
    wͦͷதͰCJOXFCQBDLDMJΛ࣮ߦ͍ͯ͠Δ
    wͦͷͨΊɺXFCQBDLDMJͷΠϯετʔϧ΋ඞਢ
    wXFCQBDLDPOpHKTΛಡΈࠐΉ
    

    View Slide

57. XFCQBDLͷ಺෦Ͱ࢖༻͞Ε͍ͯΔॏཁͳϝιου
    

    View Slide

58. XFCQBDLDMJMJCVUJMTDPNQJMFSKT
    XFCQBDLͷύοέʔδΛఆٛ
    

    View Slide

59. XFCQBDLMJCXFCQBDLKT
    wXFCQBDL0QUJPOT"QQMZ
    QSPDFTT PQUJPOT DPNQJMFS
    Λ࣮ߦ
    w$PNQJMFS XFCQBDLMJC$PNQJMFSKT
    ΠϯελϯεΛੜ੒࣮ͯ͠ߦ
    

    View Slide

60. XFCQBDLMJC8FCQBDL0QUJPOT"QQMZKT
    wϓϥάΠϯΛద༻͍ͯ͘͠
    

    View Slide

61. XFCQBDLMJC$PNQJMFSKT
    

    View Slide

62. XFCQBDLMJC$PNQJMFSKT
    wఆٛݩ͸XFCQBDL5BQBCMF
    wXFCQBDLͷ

    ϓϥάΠϯΠϕϯτΛऔಘ͢Δ
    

    View Slide

63. XFCQBDLMJC$PNQJMFSKT
    wDPNQJMBUJPOΠϯελϯεΛ

    ੜ੒
    wIPPLTNBLFͰ

    ผͷϓϥάΠϯ΋ฒྻͰ

    ಈ͘Α͏ʹ
    

    View Slide

64. XFCQBDLMJC8FCQBDL0QUJPOT"QQMZKT
    wXFCQBDL0QUJPOT"QQMZ
    QSPDFTT PQUJPOT DPNQJMFS
    ʹ

    ໭ͬͯ͘Δ
    w&OUSZ0QUJPO1MVHJO͕࣮ߦ͞ΕΔ
    

    View Slide

65. XFCQBDLMJC&OUSZ0QUJPO1MVHJOKT
    ୯ҰͷFOUSZΛఆ͍ٛͯ͠ΔͷͰ

    4JOHMF&OUSZ1MVHJO͕ݺ͹ΕΔ
    

    View Slide

66. XFCQBDLMJC4JOHMF&OUSZ1MVHJOKT
    w BEE&OUSZϝιουͰ&OUSZ͔Β

    ґଘؔ܎Λදͨ͠ΠϯελϯεΛ
    ੜ੒
    w $PNQJMBUJPOBEE.PEVMF$IBJO
    Λ࣮ߦ
    

    View Slide

67. XFCQBDLMJC/PSNBM.PEVMF'BDUPSZKT
    wXFCQBDLFOIBODFESFTPMWFΛ࢖༻ͯ͠ɺSFRVFTUΛղܾ
    wXFCQBDLMJC3VMF4FUKTʹఆΊΒΕͨSVMFTΛॲཧ͢Δ
    wMPBEFSͷϦΫΤετΛղܾ͢Δ
    w/PSNBM.PEVMFͷΠϯελϯεΛੜ੒
    

    View Slide

68. XFCQBDLMJC/PSNBM.PEVMFKT
    wXFCQBDLMPBEFSSVOOFSΛ࢖༻ͯ͠ɺ

    MPBEFSͷॲཧΛద༻
    w͜͜ͰCBCFMMPBEFSͷॲཧ͕௥Ճ͞ΕΔ
    wXFCQBDL1BSTFSͰ1BSTF
    w1BSTFͷதͰɺґଘؔ܎ʹ௥Ճ
    

    View Slide

69. XFCQBDLMJC4JOHMF&OUSZ1MVHJOKT
    w BEE&OUSZϝιουͰ&OUSZ͔Β

    ґଘؔ܎Λදͨ͠ΠϯελϯεΛੜ੒
    w $PNQJMBUJPOBEE.PEVMF$IBJOΛ࣮ߦ
    

    View Slide

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ΛϏϧυ͢Δ
    

    View Slide

71. ॲཧͷྲྀΕΛͬ͘͟ΓՄࢹԽ
    

    View Slide

72. ·ͱΊ
    

    View Slide

73. ·ͱΊ
    w#BCFM
    w༷ʑͳ+BWB4DSJQUͷίʔυΛม׵Ͱ͖Δ
    wXFCQBDL
    wϞδϡʔϧόϯυϥʔ
    wϑϩϯτΤϯυͱͯ͠਎ʹ͚͓͍ͭͯͯଛ͸ͳ͍஌ࣝ
    wத਎΋ֶΜͰͲΜͲΜ࢖͍౗͍͖ͯ͠·͠ΐ͏ʂ
    

    View Slide

74. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide