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
Better Code Design in PHP
afilina
0
170
Introduction to kotlinx.rpc
arawn
0
760
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
Ruby on cygwin 2025-02
fd0
0
180
AIプログラミング雑キャッチアップ
yuheinakasaka
17
4.3k
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.2k
バッチを作らなきゃとなったときに考えること
irof
2
520
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
sappoRo.R #12 初心者セッション
kosugitti
0
280
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Making Projects Easy
brettharned
116
6k
Building an army of robots
kneath
303
45k
How STYLIGHT went responsive
nonsquared
98
5.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
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͔ΒҠߦ͠Α͏!
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠