Webpack 3 ৮ͬͯΈͨԶͷΛฉ͚ʂʂLTେձ #4 2017/07/19
View Slide
(ג)Ϩεί ΤϯδχΞ ng-fukuokaද৽ٓါ !QVLVY
Webpack
Webpack• ϑϩϯτΤϯυपΓͷϏϧυπʔϧ• HTML/CSS/JS → શ෦JSʹม• bundle.js ʹ·ͱΊΔʢׂՄʣ
V3 ϦϦʔεʂhttps://medium.com/webpack/webpack-3-official-release-15fd2dd8f07bV2ϦϦʔε͔Βܦͬͯͳ͍ΜͰ͚͢Ͳ…
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.22npm i -D uglifyjs-webpack-plugin
Webpack 3 ʹҠߦ͠Α͏ʂ