$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
webpack-serveで作る開発サーバ
Search
camcam_lemon
August 21, 2018
Programming
0
320
webpack-serveで作る開発サーバ
We Are JavaScripters! @23rd
camcam_lemon
August 21, 2018
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
オレを実装してデザイン実装楽したい
lemon
0
60
要素のサイズを変えずに押しやすくする
lemon
0
78
iOSのキーボード入力ビューをカスタマイズする
lemon
0
260
視え方と文字の大きさ
lemon
1
420
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
300
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
5k
UI/UXデザイナーがデザインしてるもの
lemon
2
330
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
1k
ESLintで始めるTypeScriptの静的解析
lemon
8
2.1k
Other Decks in Programming
See All in Programming
手が足りない!兼業データエンジニアに必要だったアーキテクチャと立ち回り
zinkosuke
0
420
ViewファーストなRailsアプリ開発のたのしさ
sugiwe
0
400
【Streamlit x Snowflake】データ基盤からアプリ開発・AI活用まで、すべてをSnowflake内で実現
ayumu_yamaguchi
1
110
関数実行の裏側では何が起きているのか?
minop1205
1
620
Socio-Technical Evolution: Growing an Architecture and Its Organization for Fast Flow
cer
PRO
0
270
GeistFabrik and AI-augmented software development
adewale
PRO
0
260
C-Shared Buildで突破するAI Agent バックテストの壁
po3rin
0
250
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
matsu_chara
1
210
なあ兄弟、 余白の意味を考えてから UI実装してくれ!
ktcryomm
10
11k
tparseでgo testの出力を見やすくする
utgwkk
1
140
CloudNative Days Winter 2025: 一週間で作る低レイヤコンテナランタイム
ternbusty
7
2k
モダンJSフレームワークのビルドプロセス 〜なぜReactは503行、Svelteは12行なのか〜
fuuki12
0
200
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
432
66k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.8k
Unsuck your backbone
ammeep
671
58k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
54k
BBQ
matthewcrist
89
9.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
Statistics for Hackers
jakevdp
799
230k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
700
Rails Girls Zürich Keynote
gr2m
95
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
120
20k
The Invisible Side of Design
smashingmag
302
51k
Transcript
webpack-serveͰ࡞Δ։ൃαʔό We Are JavaScripters! @23rd
Twitter @camcam_lemon Company ຊࣄث Occupation ϑϩϯτΤϯυΤϯδχΞ / σβΠφʔ Skills React,
TypeScript / Figma
webpack-serveͬͯͬͯ·͔͢ʁ
webpack-serve isԿ
webpack-serve isԿ ˕webpack-dev-serverͷޙܧϞδϡʔϧ ˕εϦϜͰʂϞμϯͰʂϑϨΩγϒϧʂ ͳ։ൃαʔόʢ...Β͍͠ʣ ˕koaͱ͍͏ϛυϧΣΞͰಈ͍͍ͯΔ — webpack-dev-serverexpress
webpack-dev-server ͷࠓ ˕৽نػೳͷ։ൃߦΘΕͣϝϯςφϯεϞʔυ — 20183݄Λڥʹίϛοτස͕ܹݮ ˕υΩϡϝϯτͰwebpack-serveΛ͑ͱΞφ ϯε͍ͯ͠Δ ˕ݹ͍ϒϥβͰͷಈ࡞֬ೝͰͷΈ͏͜ͱΛਪ ͍ͯ͠Δ
ઃఆϑΝΠϧΛॻ͍͍ͯ͜͏!
ઃఆϑΝΠϧ ˕ no configͰಈ͘ʢ͓͢͢Ί͠·ͤΜʣ ˕ webpack.config.js͔serve.config.jsʹॻ͘ - webpack.config.jsͰͷexported functionͷهड़Ͱ͖ͳ͍ -
serve.config.jsΛ༏ઌతʹಡΈࠐΉ ˕ .servercͩͱjsonyamlͰهड़͢Δ͜ͱͰ͖Δ
͜ͷॻ͖ํwebpack-serveͰಈ͔ͳ͍
͜ͷॻ͖ํͩͱಈ͘
modeͷࢦఆ ˕ WEBPACK_SERVEͱ͍͏ڥมΛར༻͢Δ ˕ cli͔Β͢͜ͱͰ͖ͳ͍
modeͷࢦఆ
buildग़ྗઌͷύε߹ΘͤΔ ˕ outputͷ path ͔ publicPath Λࢦఆ͍ͯ͠Δ ߹ webpack-serve ͕ͦΕΛݕͰ͖ͳ͍
˕ σϑΥϧτ͕ ” ./ “ ʹͳ͍ͬͯΔͷͰมߋ͢Δ ໊લΛҰகͤ͞Δ
history-api-failbackproxy ˕ webpack-dev-serverʹ͍͔͋ͬͨͭ͘ͷػೳ ͕webpack-serve͔Βআ͞Εͨ ˕ ΞυΦϯͱ͍͏ܗͰՃ͢Δ͜ͱͰ࣮Ͱ͖Δ ˕webpack-dev-server͔ΒҠߦ͢Δࡍ ͕͜͜1൪ͷϋϚΓͲ͜ΖʹͳΓͦ͏
ΞυΦϯͷՃ
ΞυΦϯͷՃ(history-api-failback)
հҎ্ʹͳΓ·͕͢ ଞʹઃఆͰ͖Δ͜ͱͨ͘͞Μ͋Γ·͢
webpack-dev-server͔ΒҠߦ͠Α͏!
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠