Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
webpack-serveで作る開発サーバ
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
66
要素のサイズを変えずに押しやすくする
lemon
0
82
iOSのキーボード入力ビューをカスタマイズする
lemon
0
290
視え方と文字の大きさ
lemon
1
430
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
320
フロントエンドにおけるアーキテクチャとの向き合い方
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
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
heimusu
7
2.8k
SourceGeneratorのススメ
htkym
0
200
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
130
Implementation Patterns
denyspoltorak
0
290
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
masahiro_nishimi
5
460
CSC307 Lecture 04
javiergs
PRO
0
660
CSC307 Lecture 09
javiergs
PRO
1
840
CSC307 Lecture 07
javiergs
PRO
0
550
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
minodriven
21
7.2k
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
nrslib
2
1.9k
AI Schema Enrichment for your Oracle AI Database
thatjeffsmith
0
280
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
700
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
WENDY [Excerpt]
tessaabrams
9
36k
Speed Design
sergeychernyshev
33
1.5k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.3k
A Tale of Four Properties
chriscoyier
162
24k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
0
260
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
69
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1k
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
66
The Mindset for Success: Future Career Progression
greggifford
PRO
0
240
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
320
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͔ΒҠߦ͠Α͏!
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠