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 ʹҠߦ͠Α͏ʂ