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 pack your web
Search
Yuanhsiang Cheng
May 15, 2015
Technology
17
12k
Webpack pack your web
@Modern Web 2015
Yuanhsiang Cheng
May 15, 2015
Tweet
Share
More Decks by Yuanhsiang Cheng
See All by Yuanhsiang Cheng
How to rebuild a websocket service by golang and redis
yhsiang
0
1.1k
From React to React Native Web
yhsiang
0
170
Rethink React in Elm
yhsiang
0
1.1k
開源與工程師的自我修養
yhsiang
0
190
Sayit in Taiwan
yhsiang
0
150
LY sayit
yhsiang
0
130
2015 Summer of ?
yhsiang
0
290
How to be a good wan-jun
yhsiang
1
140
Experience in building isomorphic app
yhsiang
11
750
Other Decks in Technology
See All in Technology
事業開発におけるDify活用事例
kentarofujii
5
1.5k
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
130
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
1
460
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
770
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
coconala_engineer
0
260
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
380
DSPy入門
tomehirata
0
110
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
720
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
4
3.4k
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
260
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
340
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
150
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
340
57k
Statistics for Hackers
jakevdp
799
220k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Unsuck your backbone
ammeep
671
58k
Designing Experiences People Love
moore
142
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Scaling GitHub
holman
463
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Transcript
Webpack pack your web Ly Cheng Modern Web 2015
LY yhsiang lyforever
國會無雙 市⻑⾧長給問
先調查⼀一下
Webpack module bundler
https://twitter.com/mjackson/status/584227818910777345
先講⼀一段故事
<script src=‘jquery.js’></script> <script src=‘app.js’></script> Uncaught Referencer Error jQuery is not
defined
https://markb4.files.wordpress.com/2013/05/and-then-what-happened.jpeg
CommonJS vs AMD Server-side reuse vs Parallel loading
CommonJS AMD Works in the browser without build http://pichost.me/1835208/
But Finally, you have to build sth.
ES6 Harmony not ready for native browser
Not Only Javascript css, images, fonts, html ….
Assets pipeline In Rails, but now …
http://fccowasso.com/wp-content/uploads/2013/09/hope.jpg
http://webpack.github.io/
Webpack has Code Splitting Loaders Plugins Hot Module Replacement
http://webpack.github.io/docs/comparison.html Comparison Browserify vs Webpack blog.namangoel.com/browserify-vs-webpack-js-drama
Basic Usage
Configuration CLI and webpack.config.js
plugins devtool target
loaders preprocess files http://webpack.github.io/docs/loaders.html
loaders preprocess files http://webpack.github.io/docs/loaders.html pre-* / loaders / post-*
File loader filename template http://webpack.github.io/docs/loader-conventions.html url-loader, json-loader …
plugins make webpack flexible
Extract-text extract inline css to files
Code splitting load on demand idea from GWT
CommonJS: require.ensure AMD: require
{c, d} will be an additional chunk.
Stylesheets
require css create style element inline css extract-text-plugin css files
Shimming modules
require("imports?$=jquery!./file.js") var XModule = require("exports?XModule!./file.js")
Hot Module Replacement Livereload for every module
http://webpack.github.io/docs/hot-module-replacement-with-webpack.html
Entry webpack-dev-server/client? http://localhost:2992 webpack/hot/only-dev-server Plugins new webpack.HotModuleReplacementPlugin()
Webpack analyze
http://webpack.github.io/analyse/
None
Webpack 2 webpack/concord
How We Use Webpack
Build with React watchout-tw/prototype-seed
Directory Structure component-based, SUITCSS
How about API
Proxy server webpack-dev-server and express use proxy option now!
Special thank to @tomchentw
Thank you
Recommendations https://github.com/petehunt/webpack-howto webpack-howto https://github.com/webpack/react-starter react-starter