webpackが何故必要で、何故分かりづらいのか

webpack͕ԿނඞཁͰɺ Կނ෼͔ΓͮΒ͍ͷ͔ @tomof 1

໨࣍ 1. Կނwebpackͳͷ͔ʁ 2. webpackೖ໳ 3. webpack͸Կނ͜Μͳʹ΋෼͔ΓͮΒ͍ͷ͔? 4. ·ͱΊ 2

1. Կނwebpackͳͷ͔ʁ 3

طଘͷπʔϧ͸Կ͕ବ໨ͩͬͨͷ͔ʁ 4

5 େن໛ͳϓϩδΣΫτʹ͸ ద͍ͯ͠ͳ͍

զʑ͸ɺ1ͭͷڊେͳϑΝΠϧʹ࿈݁͢ΔΑ͏ɺ ڭҭ͞Εͯ͠·ͬͨʂʂ 6

طଘͷπʔϧΛ࢖ͬͯ ղܾͰ͖ͳ͔ͬͨͷ͔ʁ 7

8 ֦ுΛࢼΈ͕ͨ ্ख͘ߦ͔ͳ͔ͬͨ

webpackͷ໨త • ґଘੑͷ͋ΔπϦʔߏ଄ΛɺಡΈࠐΈ࣌ͷඞཁੑʹԠͯ͡  νϟϯΫ(chunk/ݻ·Γ)ຖʹ෼ׂ͢Δɻ • ॳճͷಡΈࠐΈ࣌ؒΛ୹͘͢Δ(อͭ)ɻ • શͯͷ੩తΞηοτΛϞδϡʔϧʹ͢Δ͜ͱ͕ग़དྷΔɻ • େن໛ϓϩδΣΫτʹదͨ͠࢓૊Έɻ
9

खಈͰղܾͰ͖ͳ͍͔ʁ • ґଘੑͷղܾɺඇಉظಡΈࠐΈ • ؾ͕ڰ͍ͦ͏…ɻ 10

webpackʹҕͶΔࣗಈԽͷઃఆ • ෼ׂͨ͠ϑΝΠϧαΠζ͕খ͗͢͞Δ৔߹͸ɺ  ෼ׂ͠ͳ͍ͱ͍͏ઃఆ • ը૾αΠζ͕খ͚͞Ε͹ΠϯϥΠϯԽɺ  େ͖͚Ε͹URLͰಡΈࠐΈɻ 11 background-image: url('../img/puppy.jpg');
background-image: url(‘data:image/png;base64, iVB0Rw0…’); size େ size গ

• webpack your bags ͷ Maxime Fabre ࢯ – طଘͷπʔϧͰຬ଍͍ͯͨ͠͠ɺ࠷ॳʹwebpackͷ֓ཁʹ໨Λ
௨ͨ࣌͠ʹΠϥοͱͯ͠λϒΛดͨ͡ɻ – ࠓ͸શͯΛwebpackʹҕͶͯ͠·͑ͱͳ͍ͬͯΔɻ 12 webpackΛ࢖ͬͨਓͷײ૝

2. webpackೖ໳ 13

webpackΛ࢖༻͢Δʹ͸? 1. webpackΛΠϯετʔϧ 2. webpack.conﬁg.jsʹઃఆΛॻ͖ࠐΉ 3. webpack͔Βఏڙ͞ΕΔrequireؔ਺ʹΑͬ ͯɺϞδϡʔϧͷಡΈࠐΈΛߦ͏ɻ 4. ϏϧυίϚϯυΛ࣮ߦ
14

webpack.conﬁg.js • ࠷ऴతʹ module.exports ʹΦϒδΣΫΛࢦఆ͢Δ 15 module.exports = {  entry:
…,  output: {…},  module: {  loaders: [ …  ],  }, plugins: […], ɹ…  };

webpack.conﬁg.js • ΤϯτϦϙΠϯτ = JavaScript࣮ߦͷೖΓޱͱͳΔϑΝΠϧΛࢦఆ 16 module.exports = {  entry:
…,  output: {…},  module: {  loaders: [ …  ],  }, plugins: […], ɹ…  };

webpack.conﬁg.js 17 module.exports = {  entry: …,  output: {…},  module:
{  loaders: [ …  ],  }, plugins: […], ɹ…  }; • ग़ྗϑΝΠϧͷઃఆ

webpack.conﬁg.js • ϩʔμʔͷઃఆ 18 module.exports = {  entry: …,  output:
{…},  module: {  loaders: [ …  ],  }, plugins: […], ɹ…  };

webpack.conﬁg.js • ϓϥάΠϯͷઃఆ 19 module.exports = {  entry: …,  output:
{…},  module: {  loaders: [ …  ],  }, plugins: […], ɹ…  };

ϏϧυίϚϯυΛ࣮ߦ 20

webpack༻ޠ • νϟϯΫ • ϩʔμʔ • ϓϥάΠϯ • HMR (Hot
Module Replacement) 21

νϟϯΫ 22 1νϟϯΫ=࠷ऴతʹ1ϑΝΠϧʹग़ྗ͞ΕΔͱ͸ݶΒͳ͍? (͜͜Ͱ͸ɺϓϥάΠϯ͕ɺCSSΛൈ͖ग़ͯ͠ผϑΝΠϧʹ෼཭) • ίʔυͷݻ·Γ

ϩʔμʔ 23 • Ϟδϡʔϧͱͯ͠ಡΈࠐΊΔΑ͏ʹ͢ΔͨΊͷ࢓૊Έ • loaderͷଞʹpreLoader(લ)ɺpostLoader(ޙ)͕͋Δ – preLoader : ओʹlintܥͷॲཧͰ࢖༻͞ΕΔ
– postLoader : ओʹίʔυΧόϨοδͷॲཧͰ࢖༻͞ΕΔ

ϩʔμʔͷઃఆྫ 24 module: {  loaders: [  {  test: /\.js/,  loader:
'babel',  include: __dirname + '/src',  },  {  test: /\.scss/,  loader: 'style!css!sass'  },  …  ]

ϩʔμʔͷνΣʔϯ 25 • νΣʔϯͰܨ͛Δ͜ͱ͕Մೳɻ ྫ)ɹ'style!css!sass' 1. SassΛCSSʹม׵ 2. CSSΛJavaScriptʹจࣈྻͱͯ͠ಡΈࠐΉ 3.
ಡΈࠐΜͩจࣈྻΛ<style>λάͱͯ͠<head>಺ʹ௥Ճ .sass .css HTML <style> body: {…} header: {…} 1 2 3

ϩʔμʔΛconﬁgʹઃఆ͢Δ͜ͱͰ… 26 require("!style!css!./style.css"); require("./style.css");

ϓϥάΠϯ͕ߦ͏͜ͱʢ̍ʣ 27 • ϩʔμʔʹΑͬͯग़ྗ͞ΕͨϑΝΠϧʹରͯ͠Կ͔Λ ߦ͏ –ɹѹॖԽ ɾ೉ಡԽ –ɹڞ௨͢ΔίʔυΛҰవΊʹͯ͠ผϑΝΠϧʹൈ͖ग़͢ –ɹಛఆͷαΠζʹຬͨͳ͍ϑΝΠϧͷ෼ׂΛऔΓ΍ΊΔ

28 • ϩʔμʔͷ໾ׂ͔Β֎ΕΔ͜ͱΛ୲͏ –ɹग़ྗϑΥϧμ಺ΛΫϦʔϯΞοϓ͢Δ –ɹwebpackͷग़ྗ಺༰ʹ߹ΘͤͯಈతʹHTMLΛੜ੒͢Δ ϓϥάΠϯ͕ߦ͏͜ͱʢ̎ʣ

HMR 29 • Hot Module Replacement • ΦʔτϦϩʔυ͸ϖʔδશମΛ࠶ಡࠐΈ͢Δ͕ɺHMR͸࠶ಡ ࠐ͢Δ͜ͱແ͘ɺมߋ͞ΕͨՕॴ͚ͩΛಈతʹஔ׵͢Δɻ •
ྫ͑͹ɺ͋ΔखॱΛز͔ͭ౿ΜͰදࣔͨ͠μΠΞϩά಺ͷॲ ཧΛมߋͨ͠৔߹ʹɺͦͷखॱΛ܁Γฦ͢ඞཁ͕ແ͘ͳΔɻ

web-dev-serverͬͯʁ 30 • Expressϕʔεͷ։ൃ༻αʔόʔ • ΦʔτϦϩʔυ΍HMRΛαϙʔτ • /webpack-dev-server/ʹiframeΛ࢖༻ͨ͠  ಛผͳ؀ڥΛఏڙ

web-dev-serverΛ࢖༻͢Δʹ͸ʁ 1. webpack-dev-serverΛΠϯετʔϧ 2. webpack.conﬁg.js·ͨ͸ίϚϯυϥΠϯҾ਺ʹઃఆ Λࢦఆͯ͠ɺίϚϯυͰαʔόʔΛ্ཱͪ͛Δɻ 3. localhost:8080 ·ͨ͸ɺ  localhost:8080/webpack-dev-server/
Ͱ֬ೝ  (8080͸σϑΥϧτઃఆͷϙʔτ൪߸) 31

3. webpack͸Կނ͜Μͳʹ΋ ɹ෼͔ΓͮΒ͍ͷ͔? 32

33 ෼͔ΓͮΒ͍ݪҼ • ઃఆͷࢦఆ –ɹઃఆͷΩʔɾ஋ͳͲʹҰ؏ੑ͕ແ͍ɻ –ɹϓϥάΠϯͷಈ࡞͕΍΍͍͜͠ɻ • υΩϡϝϯτྨ –ɹቕΓͦ͏ͳϙΠϯτ΍෼͔ΓͮΒ͍ϙΠϯτΛ  ڧௐͨ͠ΓɺԿނͦ͏ͳͷ͔ʁͱ͍ͬͨઆ໌͕ 
ෆ଍͍ͯ͠Δɻ

34 entry: ‘./src’, entry: ‘./src/*’, ʁ gulp.src(“./path/to/**/*.js”) ʹ ͍ۙײ͡ʁ webpack.conﬁg.jsͷentryύεࢦఆʹቕͬͨ

entry: ‘./src/*’, entry: ‘./src’, 35 ʁ webpack.conﬁg.jsͷentryύεࢦఆʹቕͬͨ ҧͬͨ

entry: ‘./src’, entry: ‘./src/index.js’, 36 webpack.conﬁg.jsͷentryύεࢦఆʹቕͬͨ

37 webpack.conﬁg.jsͷentryύεࢦఆʹቕͬͨ ͦͷҰํͰ… output: {  …  path: ‘./builds’ …  },
outputͷpathͳͲɺϑΥϧμΛࣔ͢ઃఆ΋͋Δɻ

38 entry: ‘./src’, ࣮͸”main”ͱ͍͏νϟϯΫ໊͕ࣗಈతʹ෇͚ΒΕ͍ͯΔɻ output: {  filename: '[name]-bundle.js',  … },
νϟϯΫ໊ͷ໊෇͚ͱ࢖༻ํ๏͕આ໌ෆ଍ main-bundle.js

39 entry: {  main: './src',  vendor: ["jquery", "mustache"],  admin: './admin' 
}, νϟϯΫ໊ͷ໊෇͚ͱ࢖༻ํ๏͕આ໌ෆ଍ entry: ‘./src’, νϡʔτϦΞϧ౳ͰΑ͘༻͍ΒΕΔྫ͕ͩ… ࣮ફͰ͸͜ͷΑ͏ʹͳΔͷͰ͸

40 entry: {  main: './src',  vendor: ["jquery", "mustache"],  admin: './admin' 
}, νϟϯΫ໊ͷ໊෇͚ͱ࢖༻ํ๏͕આ໌ෆ଍ entry: ‘./src’, νϡʔτϦΞϧ౳ͰΑ͘༻͍ΒΕΔྫ͕ͩ… ࣮ફͰ͸͜ͷΑ͏ʹͳΔͷͰ͸ ೚ҙʹࢦఆՄೳͳνϟϯΫ໊

41 • ϩʔμʔͷνΣʔϯ͸ɺԿނӈ͔Βࠨͳͷ͔ʁ ϩʔμʔઃఆͷॻ͖ํ ɹ ’style!css!sass’

42 • ͜͏͍͏͜ͱͳͷ͔ʁ ϩʔμʔઃఆͷॻ͖ํ style( css( sass( ) ) )
΋ͦ͠͏ͳΒɺҰݴॻ͍ͯ͘ΕΕ͹͍͍ͷʹ…ɻ

ઃఆͷΩʔɾ஋͕෼͔ΓͮΒ͍ 43 module: {  loaders: [  {  test: /\.js/,  loader:
'babel',  include: __dirname + '/src',  },  {  test: /\.scss/,  loader: 'style!css!sass'  },  …  ]

ઃఆͷΩʔɾ஋͕෼͔ΓͮΒ͍ 44 module: {  loaders: [  {  test: /\.js/,  loader:
'babel',  include: __dirname + '/src',  },  {  test: /\.scss/,  loader: 'style!css!sass'  },  …  ] ͳͥɺtest ͳͷ͔ʁ

ϓϥάΠϯ͕೉͍͠… 46 • ࣮ફͰආ͚ͯ͸௨Εͳ͍͚Ͳཧղ͕೉͍͠ϓϥάΠϯ –ɹCommonsChunkPluginɹ(webpackެࣜ) –ɹextract-text-webpack-plugin

CommonsChunkPlugin 47 • ֤νϟϯΫͰڞ௨(ॏෳ)͢ΔϞδϡʔϧΛൈ͖ग़ͯ͠ผ ϑΝΠϧʹ·ͱΊͯ͘ΕΔϓϥάΠϯ • αʔυύʔςΟ੡ͷϞδϡʔϧ͚ͩΛ·ͱΊͨ  vendor.jsΛ࡞Δͷʹ΋࢖༻͞ΕΔ͕ɺ͜Ε͕  ඇৗʹ෼͔ΓͮΒ͔ͬͨɻ

CommonsChunkPlugin 48 • ͪͳΈʹɺ͜ͷϓϥάΠϯΛ࢖༻͠ͳ͍ͱ…  webpack͸࠷௿ݶͷ࠷దԽ͔͠ߦΘͳ͍ͨΊɺ

CommonsChunkPlugin 49 • ڞ௨ͯ͠࢖༻͞ΕΔϥΠϒϥϦ΍Ϟδϡʔϧ͕  ෳ਺ͷνϟϯΫͰಡΈࠐ·Εͯ͠·͏ɻ

CommonsChunkPlugin 50 Ծʹɺ͜ΜͳΤϯτϦʔϙΠϯτ͕͋ͬͨͱͯ͠ɺ entry: {  pageA: "./pageA",  pageB: "./pageB",  pageC:
"./pageC",  adminPageA: "./adminPageA",  adminPageB: "./adminPageB",  adminPageC: "./adminPageC",  }, ࣍ͷΑ͏ͳCommonsChunkPluginࢦఆ͕  ͋ͬͨͱ͢Δͱɺ

CommonsChunkPlugin 51 var webpack = require('webpack');  … plugins: [ … 
new webpack.optimize.CommonsChunkPlugin({  name: "admin-commons",  chunks: ["adminPageA", "adminPageB"]  }),  new webpack.optimize.CommonsChunkPlugin({  name: "commons",  chunks: ["pageA", "pageB", "admin-commons"],  minChunks: 2  }),  new webpack.optimize.CommonsChunkPlugin({  name: "c-commons",  chunks: ["pageC", "adminPageC"]  }),  ],

CommonsChunkPlugin 53 adminPageA adminUkl adminAcontroller projectUkl adminPageB adminUkl adminBcontroller projectUkl

CommonsChunkPlugin 54 admin-commons adminUkl projectUkl adminPageA adminAcontroller adminPageB adminBcontroller

CommonsChunkPlugin 56 admin-commons adminUkl projectUkl pageA projectUkl pageAcontroller pageB projectUkl
pageBcontroller

CommonsChunkPlugin 57 admin-commons adminUkl pageA pageAcontroller pageB pageBcontroller commons projectUkl

CommonsChunkPluginͷओͳΦϓγϣϯ • nameɿڞ௨νϟϯΫͷ໊લ   ͪͳΈʹnames΋ଘࡏ͢Δ(഑ྻΛࢦఆ) • chunksɿର৅ͱ͢ΔνϟϯΫ  ʢলུ͢ΔͱɺશͯͷνϟϯΫ͕ର৅ʂ) • minChunksɿ͜ͷ਺ͷνϟϯΫͰ࢖༻͞Ε͍ͯͨΒର৅ 
(2ճʙνϟϯΫ਺ or Inﬁnity or ؔ਺) 58

αʔυύʔςΟϥΠϒϥϦ͚ͩΛ෼཭͍ͨ͠ 59 vendor

60 <script src="builds/vendor.js"></script>  <script src=“builds/app.js"></script> vendor.jsʹ͸ɺ७ਮʹ3rdύʔςΟͷίʔυ͕ ࿈݁͞Εͨ΋ͷ͚ͩΛؚΊ͍ͨɻ αʔυύʔςΟϥΠϒϥϦ͚ͩΛ෼཭͍ͨ͠

61 αʔυύʔςΟϥΠϒϥϦ͚ͩΛ෼཭͍ͨ͠ entry: {  main: './src',  vendor: ["jquery", "moment", "underscore"], 
admin: './admin'  },

62 αʔυύʔςΟϥΠϒϥϦ͚ͩΛ෼཭͍ͨ͠ entry: {  main: './src',  vendor: ["jquery", "moment", "underscore"], 
admin: './admin'  },

63 αʔυύʔςΟϥΠϒϥϦ͚ͩΛ෼཭͍ͨ͠ plugins: [  …  new webpack.optimize.CommonsChunkPlugin({  name: 'vendor',  filename:
'vendor.js',  minChunks: Infinity,  }), … ]

'vendor.js',  minChunks: Infinity,  }), … ] Inﬁnity !?

65 vendor CommonsChunkPlugin Inﬁnity vendorҎ֎ͷϞδϡʔϧ vendorҎ֎ͷϞδϡʔϧ vendorҎ֎ͷϞδϡʔϧ

'vendor.js',  minChunks: Infinity,  }), … ] chunks͕লུ͞Ε͍ͯΔͷͰɺ શͯͷνϟϯΫ͕ର৅Ͱ͋Δ͜ͱʹ΋஫ҙʂ chunks: …,

CommonsChunkPlugin 67 app app appController pageA pageAcontroller admin adminController admin
શͯͷνϟϯΫ͔Β

CommonsChunkPlugin 68 app app appController pageA pageAcontroller admin adminController admin
vendor νϟϯΫͷ ϞδϡʔϧΛ(࣮࣭)ൈ͖ग़͚ͩ͢(?)

69 extract-text-webpack-plugin • ࠷ऴతͳόϯυϧ͔Βಛఆͷछྨͷ  ίϯςϯπΛूΊɺ ଞͷ΋ͷͱύΠϓ͢Δɻ • ΄ͱΜͲ͕ɺCSSͷͨΊʹ࢖༻͞ΕΔɻ • ϖʔδͷॳظදࣔ࣌ʹɺCSS͕ಈతʹಡΈࠐ·ΕΔ͜ͱ
ʹΑͬͯى͖Δνϥ͖ͭͷ๷ࢭɻ

70 extract-text-webpack-plugin var ExtractPlugin = require('extract-text-webpack-plugin'); var plugins = [ 
…  new ExtractPlugin(‘bundle.css'), …  ];

71 extract-text-webpack-plugin module: {  loaders: [  …  {  test: /\.scss/, 
loader: ExtractPlugin.extract('style', 'css!sass'),  },  …  ],  },

72 extract-text-webpack-plugin module: {  loaders: [  …  {  test: /\.scss/, 
loader: ExtractPlugin.extract('style', 'css!sass'),  },  …  ],  }, ൈ͖ग़͢͜ͱ͕Մೳͳ৔߹ʹ ߦ͏͜ͱ ൈ͖ग़͢͜ͱ͕ ग़དྷͳ͔ͬͨ৔߹ʹ ௥ՃͰߦ͏͜ͱ

4. ·ͱΊ 73

νϡʔτϦΞϧ΍ϒϩάهࣄʹ஫ҙ • ͜ΕΒʹԊͬͯࢼ͚ͩ͢Ͱ͸ɺటপʹ͸·Δɻ • େࣄͳઆ໌΍ิ଍͕ল͔Ε͍ͯΔ͜ͱ͕ଟ͍ɻ 74

ެࣜυΩϡϝϯτΛಡΈղ͘ 75

ެࣜυΩϡϝϯτΛಡΈղ͘ 76 ίϝϯτΛؚΊ…ʢٽʣ

webpack2 / ৽υΩϡϝϯταΠτ 77

͝ਗ਼ௌɺ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ 78

webpackが何故必要で、 何故分かりづらいのか

webpackが何故必要で、 何故分かりづらいのか

More Decks by tomof

Other Decks in Programming

Featured

Transcript

webpackが何故必要で、何故分かりづらいのか

webpackが何故必要で、何故分かりづらいのか