Tweet
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-server͸express

Slide 6

Slide 6 text

webpack-dev-server ͷࠓ ˕৽نػೳͷ։ൃ͸ߦΘΕͣϝϯςφϯεϞʔυ — 2018೥3݄Λڥʹίϛοτස౓͕ܹݮ ˕υΩϡϝϯτͰ΋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ͩͱjson΍yamlͰهड़͢Δ͜ͱ΋Ͱ͖Δ

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-failback΍proxy ˕ 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

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠