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
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
140
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
470
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
170
20251027_findyさん_音声エージェントLT
almondo_event
2
450
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
140
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
130
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
7
3.5k
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
2
320
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
910
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
sh_fk2
1
360
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
3
510
組織全員で向き合うAI Readyなデータ利活用
gappy50
1
820
Featured
See All Featured
Visualization
eitanlees
149
16k
How to Ace a Technical Interview
jacobian
280
24k
Unsuck your backbone
ammeep
671
58k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Writing Fast Ruby
sferik
630
62k
For a Future-Friendly Web
brad_frost
180
10k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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