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
140
LY sayit
yhsiang
0
130
2015 Summer of ?
yhsiang
0
280
How to be a good wan-jun
yhsiang
1
140
Experience in building isomorphic app
yhsiang
11
740
Other Decks in Technology
See All in Technology
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
2k
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
920
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
10
3.6k
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
180
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
250
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
26
12k
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
13
4.1k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
RSCの時代にReactとフレームワークの境界を探る
uhyo
8
1.4k
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
2
1.2k
Oracle Cloud Infrastructure:2025年8月度サービス・アップデート
oracle4engineer
PRO
0
170
Skrub: machine-learning with dataframes
gaelvaroquaux
0
110
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
A Modern Web Designer's Workflow
chriscoyier
696
190k
Site-Speed That Sticks
csswizardry
10
800
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Visualization
eitanlees
147
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Become a Pro
speakerdeck
PRO
29
5.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
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