$30 off During Our Annual Pro Sale. View Details »
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
180
Rethink React in Elm
yhsiang
0
1.1k
開源與工程師的自我修養
yhsiang
0
190
Sayit in Taiwan
yhsiang
0
150
LY sayit
yhsiang
0
140
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
pmconf2025 - 他社事例を"自社仕様化"する技術_iRAFT法
daichi_yamashita
0
780
Microsoft Agent 365 を 30 分でなんとなく理解する
skmkzyk
1
1k
Challenging Hardware Contests with Zephyr and Lessons Learned
iotengineer22
0
120
Uncertainty in the LLM era - Science, more than scale
gaelvaroquaux
0
810
第4回 「メタデータ通り」 リアル開催
datayokocho
0
120
乗りこなせAI駆動開発の波
eltociear
1
990
21st ACRi Webinar - Univ of Tokyo Presentation Slide (Ayumi Ohno)
nao_sumikawa
0
120
コミューンのデータ分析AIエージェント「Community Sage」の紹介
fufufukakaka
0
440
AWS CLIの新しい認証情報設定方法aws loginコマンドの実態
wkm2
3
400
【pmconf2025】PdMの「責任感」がチームを弱くする?「分業型」から全員がユーザー価値に本気で向き合う「共創型開発チーム」への変遷
toshimasa012345
0
270
[CMU-DB-2025FALL] Apache Fluss - A Streaming Storage for Real-Time Lakehouse
jark
0
110
AI 駆動開発勉強会 フロントエンド支部 #1 w/あずもば
1ftseabass
PRO
0
200
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
72
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Designing for humans not robots
tammielis
254
26k
Six Lessons from altMBA
skipperchong
29
4.1k
A Modern Web Designer's Workflow
chriscoyier
698
190k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
970
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
Into the Great Unknown - MozCon
thekraken
40
2.2k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
1
93
A better future with KSS
kneath
240
18k
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