俺得なwebpack pluginsの紹介

俺得フロントエンド (1) LT会
https://opt.connpass.com/event/130433/

@Twitter
https://twitter.com/__sakito__

Transcript

1. ԶಘͳXFCQBDLQMVHJOTͷ঺հ
   ԶಘϑϩϯτΤϯυ
   -5ձ
   

   View Slide

2. wTBLJUP !@@TBLJUP@@
   
   w'SPOU&OE&OHJOFFS

   αΠϘ΢ζגࣜձࣾ
   wϑϩϯτΤϯυΞυόΠβʔ

   גࣜձࣾ,BJ[FO1MBUGPSN
   

   View Slide

3. View Slide

4. ެࣜʹ͸ࡌͬͯͳ͍ศརͳϓϥάΠϯ΋͍ͬͺ͍͋Δ
   

   View Slide

5. w3FBDUͷΤϥʔΛՄࢹԽͰ͖Δ
   wDSFBUFSFBDUBQQʹ࢖ΘΕͯΔ
   FSSPSPWFSMBZXFCQBDLQMVHJO
   

   View Slide

6. w୯ҰΤϯτϦʔͷ৔߹ʹΤϥʔʹͳΔ໰୊͕͋Δ

   13ͰͯΔͷͰղܾ͸ͦ͠͏
   
   FSSPSPWFSMBZXFCQBDLQMVHJO
   

   View Slide

7. wXFCQBDLͷϩʔσΟϯάঢ়گͷՄࢹԽ
   QSPHSFTTCBSXFCQBDLQMVHJO
   

   View Slide

8. wXFCQBDLͷϏϧυ଎౓Λଌఆ͢Δ
   4QFFE.FBTVSF1MVHJO
   

   View Slide

9. 4QFFE.FBTVSF1MVHJO
   wઃఆ΋؆୯
   

   View Slide

10. wXFCQBDLͷMPBEFSʹؔ͢Δઃఆͷ

    ϕετϓϥΫςΟεू
    wMPBEFSʹؔ͢Δઃఆ΋;FSP$POpHͰ׬݁Մೳ

    ˣྫ
    
    XFCQBDLDPOpHQMVHJOT
    

    View Slide

11. XFCQBDLDPOpHQMVHJOT
    wઃఆͰ͖ΔҰཡ͸͜Μͳײ͡
    

    View Slide

12. XFCQBDLOPUJpFS
    wXFCQBDLͷϏϧυ͕ࣦഊͨ͠ͱ͖ʹ௨஌ͯ͘͠ΕΔ
    w͜ΕͰίϯύΠϧதʹผͷ࡞ۀ͍ͯͯ͠΋ɺ

    ͙͢ʹΤϥʔʹؾ͚ͮΔ
    

    View Slide

13. GPSLUTDIFDLFSOPUJpFSXFCQBDLQMVHJO
    wXFCQBDLOPUJpFSͷܕΤϥʔ௨஌൛
    wܕΤϥʔ࣌ʹσεΫτοϓ௨஌͕͘ΔΑ͏ʹͰ͖Δ
    w'PSL5T$IFDLFS8FCQBDL1MVHJOΛ

    ઌʹಡΈࠐΉඞཁ͕͋Δ
    w'PSL5T$IFDLFS8FCQBDL1MVHJOWܥ

    Ҏ্Ͱ͋Δඞཁ͕͋Δ
    

    View Slide

14. QSFMPBEXFCQBDLQMVHJO
    wࢦఆͨ͠ϑΝΠϧΛQSFMPBE΍QSFGFUDI

    Ͱ͖ΔΑ͏ʹ͢ΔϓϥάΠϯ
    wXFCQBDLWҎ߱Ͱ͸ෆཁ
    wXFCQBDL1SFGFUDIUSVFͰઃఆͰ͖Δ
    

    View Slide

15. DPQZXFCQBDLQMVHJO
    wࢦఆϑΝΠϧ΍σΟϨΫτϦΛίϐʔͯ͘͠ΕΔ
    w࢖༻ྫ
    wը૾͕อଘ͞ΕͨσΟϨΫτϦʔΛ

    όϯυϧ͞ΕΔEJTUσΟϨΫτϦʔʹίϐʔ

    EJTUJNBHFT
    
    wIUNMͰը૾͕ɺ͜ͷΑ͏ʹࢦఆͰ͖ΔΑ͏ʹͳΔ

    JNHTSDJNBHFTqPXFSKQH
    

    View Slide

16. *NBHFNJOQMVHJO
    wը૾ͷѹॖ͕Ͱ͖Δ
    wEFW؀ڥͰ͸0''ʹ͓ͯ͘͠
    

    View Slide

17. DPQZXFCQBDLQMVHJO*NBHFNJOQMVHJO
    wXFCEFWʹ͜ͷ྆ํͷϓϥάΠϯΛ׆༻ͨ͠ํ๏͕

    ղઆ͞ΕͯΔ

    IUUQTXFCEFWDPEFMBCJNBHFNJOXFCQBDL
    

    View Slide

18. ͓·͚
    

    View Slide

19. XFCQBDLMJCTPQUJNJ[BUJPOT

    IUUQTHJUIVCDPN(PPHMF$ISPNF-BCTXFCQBDLMJCTPQUJNJ[BUJPOTSFBDU
    wNPNFOU΍MPBETIͷϑΝΠϧαΠζΛ

    CBCFM΍XFCQBDLͰ࡟Δख๏͕঺հ͞ΕͯΔ
    

    View Slide

20. ΑΓศརͳ։ൃΛ
    

    View Slide

21. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide