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

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

View Slide

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

View Slide

1. Կނwebpackͳͷ͔ʁ
3

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

2. webpackೖ໳
13

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

ϏϧυίϚϯυΛ࣮ߦ
20

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

entry: ‘./src/*’,
entry: ‘./src’,
35
ʁ
ҧͬͨ

View Slide

entry: ‘./src’,
entry: ‘./src/index.js’,
36

View Slide

37
ͦͷҰํͰ…
output: { 
… 
path: ‘./builds’
… 
},
outputͷpathͳͲɺϑΥϧμΛࣔ͢ઃఆ΋͋Δɻ

View Slide

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

View Slide

39
entry: { 
main: './src', 
vendor: ["jquery", "mustache"], 
admin: './admin' 
},
entry: ‘./src’,
νϡʔτϦΞϧ౳ͰΑ͘༻͍ΒΕΔྫ͕ͩ…
࣮ફͰ͸͜ͷΑ͏ʹͳΔͷͰ͸

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

44
module: { 
loaders: [ 
{ 
test: /\.js/, 
loader: 'babel', 
}, 
{ 
test: /\.scss/, 
}, 
… 
]
ͳͥɺtest ͳͷ͔ʁ

View Slide

45
JavaScriptͷਖ਼نදݱͷtest()ϝιουʹ༝དྷʁ
© 2005-2016 Mozilla Developer Network & ߩݙऀ֤ਓ

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

CommonsChunkPlugin
52
…
plugins: [
… 
}), 
name: "commons", 
minChunks: 2 
}), 
}), 
],

View Slide

CommonsChunkPlugin
53
adminPageA
adminUkl
adminAcontroller
projectUkl
adminPageB
adminUkl
adminBcontroller
projectUkl

View Slide

CommonsChunkPlugin
54
admin-commons
adminUkl
projectUkl
adminPageA
adminAcontroller
adminPageB
adminBcontroller

View Slide

CommonsChunkPlugin
55
…
plugins: [
… 
}), 
name: "commons", 
minChunks: 2 
}), 
}), 
],

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

60
 

vendor.jsʹ͸ɺ७ਮʹ3rdύʔςΟͷίʔυ͕
࿈݁͞Εͨ΋ͷ͚ͩΛؚΊ͍ͨɻ

View Slide

61
entry: { 
main: './src', 
vendor: ["jquery", "moment", "underscore"], 
admin: './admin' 
},

View Slide

62
entry: { 
main: './src', 
vendor: ["jquery", "moment", "underscore"], 
admin: './admin' 
},

View Slide

63
plugins: [ 
… 
name: 'vendor', 
filename: 'vendor.js', 
minChunks: Infinity, 
}),
…
]

View Slide

64
plugins: [ 
… 
name: 'vendor', 
}),
…
]
Inﬁnity !?

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

4. ·ͱΊ
73

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

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

tomof

More Decks by tomof

Other Decks in Programming

Featured

Transcript

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

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

tomof

More Decks by tomof

Other Decks in Programming

Featured

Transcript

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

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