webpack-serveで作る開発サーバ

We Are JavaScripters! @23rd

Transcript

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