Webpack 3 触ってみた

Transcript

1. Webpack 3 ৮ͬͯΈͨ
   Զͷ࿩Λฉ͚ʂʂLTେձ #4

   2017/07/19
   

   View Slide

2. 

   (ג)Ϩεί ΤϯδχΞ

   ng-fukuoka୅ද
   ৽෱ٓါ

   !QVLVY
   

   View Slide

3. Webpack
   

   View Slide

4. Webpack
   • ϑϩϯτΤϯυपΓͷϏϧυπʔϧ
   • HTML/CSS/JS → શ෦JSʹม׵
   • bundle.js ʹ·ͱΊΔʢ෼ׂ΋Մʣ
   

   View Slide

5. V3 ϦϦʔεʂ
   https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b
   V2ϦϦʔε͔Β൒೥΋ܦͬͯͳ͍ΜͰ͚͢Ͳ…
   

   View Slide

6. V3ͰԿ͕มΘͬͨʁ
   

   View Slide

7. Scope Hoisting
   • ModuleConcatenationPluginͷ௥Ճ
   • Ϟδϡʔϧผʹ (function(){}) ͯͨ͠
   ෦෼͕·ͱΊΒΕΔ
   • ࣮ߦ࣌ؒͱϑΝΠϧ༰ྔΛ࡟ݮ
   

   View Slide

8. https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b
   όϯυϧαΠζ൒ݮ!?
   

   View Slide

9. Magic Comments
   • V2͔Βͷimport()Λ࢖͏ͱchunk͕
   ʮ0.bundle.jsʯˡ Θ͔Γʹ͍͘
   • ೚ҙͷchunk໊Λ෇͚ΒΕΔ
   import(/* webpackChunkName: "my-chunk-name" */ 'module');
   

   View Slide

10. ࢖ͬͯΈΑ͏
    • ͔͔ͤͬͩ͘Βangular.ioΛ୊ࡐ
    • ng eject Ͱ webpack.config.js

    Λநग़ͯ͠ຐվ଄Ͱ͖Δ

    VerUPͰWebpack3ରԠ͢Δ͔Β΍Βͳ͍͍ͯ͘Αʂ
    

    View Slide

11. ݁Ռ
    const { CommonsChunkPlugin,
    ModuleConcatenationPlugin } = require('webpack').optimize;
    "plugins": [
    new ModuleConcatenationPlugin()
    ],
    αΠζ Ϗϧυ࣌ؒ
    ϓϥάΠϯͳ͠ ,# T
    ϓϥάΠϯ͋Γ ˞
    ,# T
    ※ webpack.config.jsʹҎԼΛ௥Ճ
    

    View Slide

12. ஫ҙ఺
    • ModuleConcatenationPlugin࢖༻࣌

    • UglifyJSPlugin͸ผύοέʔδʹ
    { presets: [["es2015", { "modules": false }]] }
    npm i -D git://github.com/mishoo/UglifyJS2#harmony-v2.8.22
    npm i -D uglifyjs-webpack-plugin
    

    View Slide

13. Webpack 3 ʹҠߦ͠Α͏ʂ
    

    View Slide