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
iOSのキーボード入力ビューをカスタマイズする
lemon
0
72
視え方と文字の大きさ
lemon
1
310
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
220
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.6k
UI/UXデザイナーがデザインしてるもの
lemon
2
300
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
880
ESLintで始めるTypeScriptの静的解析
lemon
8
1.9k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.4k
React.lazyとSuspenseで行うLazy Load
lemon
2
380
Other Decks in Programming
See All in Programming
Code Reviews
bkuhlmann
4
890
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
260
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
910
2 週間で Twitter Bot を作ってみた
contour_gara
0
230
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
200
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4k
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
PostmanでAPIの動作確認が楽になった話
h455h1
0
160
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
8.2k
ONE WEDGE_company_guide
1wedge_one
0
460
ScalarDBを用いたマイクロサービスにおけるデータ管理 (Database Engineering Meetup #2)
scalar
0
110
Featured
See All Featured
Design by the Numbers
sachag
274
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Producing Creativity
orderedlist
PRO
337
39k
Code Review Best Practice
trishagee
55
15k
The Language of Interfaces
destraynor
151
23k
How to Ace a Technical Interview
jacobian
272
22k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Teambox: Starting and Learning
jrom
128
8.4k
Done Done
chrislema
178
15k
A Modern Web Designer's Workflow
chriscoyier
689
190k
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͔ΒҠߦ͠Α͏!
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠