Webpack 3 触ってみた

Transcript

1. Webpack 3 ৮ͬͯΈͨ Զͷ࿩Λฉ͚ʂʂLTେձ #4
 2017/07/19
2. 
 (ג)Ϩεί ΤϯδχΞ
 ng-fukuoka୅ද ৽෱
   ٓါ
 !QVLVY
3. Webpack
4. Webpack • ϑϩϯτΤϯυपΓͷϏϧυπʔϧ • HTML/CSS/JS → શ෦JSʹม׵ • bundle.js ʹ·ͱΊΔʢ෼ׂ΋Մʣ
5. V3 ϦϦʔεʂ https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b V2ϦϦʔε͔Β൒೥΋ܦͬͯͳ͍ΜͰ͚͢Ͳ…
6. V3ͰԿ͕มΘͬͨʁ
7. Scope Hoisting • ModuleConcatenationPluginͷ௥Ճ • Ϟδϡʔϧผʹ (function(){}) ͯͨ͠ ෦෼͕·ͱΊΒΕΔ • ࣮ߦ࣌ؒͱϑΝΠϧ༰ྔΛ࡟ݮ
8. https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b όϯυϧαΠζ൒ݮ!?
9. Magic Comments • V2͔Βͷimport()Λ࢖͏ͱchunk͕ ʮ0.bundle.jsʯˡ Θ͔Γʹ͍͘ • ೚ҙͷchunk໊Λ෇͚ΒΕΔ import(/* webpackChunkName: "my-chunk-name" */ 'module');
10. ࢖ͬͯΈΑ͏ • ͔͔ͤͬͩ͘Βangular.ioΛ୊ࡐ • ng eject Ͱ webpack.config.js
 Λநग़ͯ͠ຐվ଄Ͱ͖Δ
 VerUPͰWebpack3ରԠ͢Δ͔Β΍Βͳ͍͍ͯ͘Αʂ
11. ݁Ռ const { CommonsChunkPlugin, ModuleConcatenationPlugin } = require('webpack').optimize; "plugins": [ new ModuleConcatenationPlugin() ], αΠζ Ϗϧυ࣌ؒ ϓϥάΠϯͳ͠ ,# T ϓϥάΠϯ͋Γ ˞ ,# T ※ webpack.config.jsʹҎԼΛ௥Ճ
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
13. Webpack 3 ʹҠߦ͠Α͏ʂ