Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
webpack-serveͰ࡞Δ։ൃαʔό We Are JavaScripters! @23rd
Slide 2
Slide 2 text
Twitter @camcam_lemon Company ຊࣄث Occupation ϑϩϯτΤϯυΤϯδχΞ / σβΠφʔ Skills React, TypeScript / Figma
Slide 3
Slide 3 text
webpack-serveͬͯͬͯ·͔͢ʁ
Slide 4
Slide 4 text
webpack-serve isԿ
Slide 5
Slide 5 text
webpack-serve isԿ ˕webpack-dev-serverͷޙܧϞδϡʔϧ ˕εϦϜͰʂϞμϯͰʂϑϨΩγϒϧʂ ͳ։ൃαʔόʢ...Β͍͠ʣ ˕koaͱ͍͏ϛυϧΣΞͰಈ͍͍ͯΔ — webpack-dev-serverexpress
Slide 6
Slide 6 text
webpack-dev-server ͷࠓ ˕৽نػೳͷ։ൃߦΘΕͣϝϯςφϯεϞʔυ — 20183݄Λڥʹίϛοτස͕ܹݮ ˕υΩϡϝϯτͰwebpack-serveΛ͑ͱΞφ ϯε͍ͯ͠Δ ˕ݹ͍ϒϥβͰͷಈ࡞֬ೝͰͷΈ͏͜ͱΛਪ ͍ͯ͠Δ
Slide 7
Slide 7 text
ઃఆϑΝΠϧΛॻ͍͍ͯ͜͏!
Slide 8
Slide 8 text
ઃఆϑΝΠϧ ˕ no configͰಈ͘ʢ͓͢͢Ί͠·ͤΜʣ ˕ webpack.config.js͔serve.config.jsʹॻ͘ - webpack.config.jsͰͷexported functionͷهड़Ͱ͖ͳ͍ - serve.config.jsΛ༏ઌతʹಡΈࠐΉ ˕ .servercͩͱjsonyamlͰهड़͢Δ͜ͱͰ͖Δ
Slide 9
Slide 9 text
͜ͷॻ͖ํwebpack-serveͰಈ͔ͳ͍
Slide 10
Slide 10 text
͜ͷॻ͖ํͩͱಈ͘
Slide 11
Slide 11 text
modeͷࢦఆ ˕ WEBPACK_SERVEͱ͍͏ڥมΛར༻͢Δ ˕ cli͔Β͢͜ͱͰ͖ͳ͍
Slide 12
Slide 12 text
modeͷࢦఆ
Slide 13
Slide 13 text
buildग़ྗઌͷύε߹ΘͤΔ ˕ outputͷ path ͔ publicPath Λࢦఆ͍ͯ͠Δ ߹ webpack-serve ͕ͦΕΛݕͰ͖ͳ͍ ˕ σϑΥϧτ͕ ” ./ “ ʹͳ͍ͬͯΔͷͰมߋ͢Δ ໊લΛҰகͤ͞Δ
Slide 14
Slide 14 text
history-api-failbackproxy ˕ webpack-dev-serverʹ͍͔͋ͬͨͭ͘ͷػೳ ͕webpack-serve͔Βআ͞Εͨ ˕ ΞυΦϯͱ͍͏ܗͰՃ͢Δ͜ͱͰ࣮Ͱ͖Δ ˕webpack-dev-server͔ΒҠߦ͢Δࡍ ͕͜͜1൪ͷϋϚΓͲ͜ΖʹͳΓͦ͏
Slide 15
Slide 15 text
ΞυΦϯͷՃ
Slide 16
Slide 16 text
ΞυΦϯͷՃ(history-api-failback)
Slide 17
Slide 17 text
հҎ্ʹͳΓ·͕͢ ଞʹઃఆͰ͖Δ͜ͱͨ͘͞Μ͋Γ·͢
Slide 18
Slide 18 text
webpack-dev-server͔ΒҠߦ͠Α͏!
Slide 19
Slide 19 text
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠