$30 off During Our Annual Pro Sale. View Details »

Webpack 3 触ってみた

puku0x
July 19, 2017

Webpack 3 触ってみた

puku0x

July 19, 2017
Tweet

More Decks by puku0x

Other Decks in Technology

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