Webpack 3 ৮ͬͯΈͨ Զͷ࿩Λฉ͚ʂʂLTେձ #4
 2017/07/19 


 (ג)Ϩεί ΤϯδχΞ
 ng-fukuoka୅ද ৽෱
ٓါ
 !QVLVY 

Webpack 

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

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

V3ͰԿ͕มΘͬͨʁ 

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

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

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

࢖ͬͯΈΑ͏ • ͔͔ͤͬͩ͘Βangular.ioΛ୊ࡐ • ng eject Ͱ webpack.config.js
 Λநग़ͯ͠ຐվ଄Ͱ͖Δ
 VerUPͰWebpack3ରԠ͢Δ͔Β΍Βͳ͍͍ͯ͘Αʂ 

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

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

Webpack 3 ʹҠߦ͠Α͏ʂ