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
camcam_lemon
August 21, 2018
Programming
0
310
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
41
iOSのキーボード入力ビューをカスタマイズする
lemon
0
190
視え方と文字の大きさ
lemon
1
370
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
260
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.8k
UI/UXデザイナーがデザインしてるもの
lemon
2
310
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
950
ESLintで始めるTypeScriptの静的解析
lemon
8
2k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
Other Decks in Programming
See All in Programming
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
100
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
340
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
250
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
PHP ステートレス VS ステートフル 状態管理と並行性 / php-stateless-stateful
ytake
0
110
Better Code Design in PHP
afilina
0
160
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
290
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
390
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.5k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
150
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
140
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Git: the NoSQL Database
bkeepers
PRO
427
65k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Adopting Sorbet at Scale
ufuk
74
9.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
A designer walks into a library…
pauljervisheath
205
24k
Writing Fast Ruby
sferik
628
61k
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͔ΒҠߦ͠Α͏!
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠