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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Yuanhsiang Cheng
May 15, 2015
Technology
12k
17
Share
Webpack pack your web
@Modern Web 2015
Yuanhsiang Cheng
May 15, 2015
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
200
Rethink React in Elm
yhsiang
0
1.1k
開源與工程師的自我修養
yhsiang
0
210
Sayit in Taiwan
yhsiang
0
190
LY sayit
yhsiang
0
150
2015 Summer of ?
yhsiang
0
320
How to be a good wan-jun
yhsiang
1
170
Experience in building isomorphic app
yhsiang
11
780
Other Decks in Technology
See All in Technology
GitHub Advanced Security × Defender for Cloudで開発とSecOpsのサイロを超える: コードとクラウドをつなぐ、開発プラットフォームのセキュリティ
yuriemori
1
120
不確実性と戦いながら見積もりを作成するプロセス/mitsumori-process
hirodragon112
1
170
AI時代のIssue駆動開発のススメ
moongift
PRO
0
320
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
11k
第26回FA設備技術勉強会 - Claude/Claude_codeでデータ分析 -
happysamurai294
0
270
最大のアウトプット術は問題を作ること
ryoaccount
0
240
Embeddings : Symfony AI en pratique
lyrixx
0
430
Cursor Subagentsはいいぞ
yug1224
2
130
FlutterでPiP再生を実装した話
s9a17
0
240
JEDAI認定プログラム JEDAI Order 2026 受賞者一覧 / JEDAI Order 2026 Winners
databricksjapan
0
410
15年メンテしてきたdotfilesから開発トレンドを振り返る 2011 - 2026
giginet
PRO
2
250
FastMCP OAuth Proxy with Cognito
hironobuiga
3
230
Featured
See All Featured
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
370
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
230
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.8k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.2k
Docker and Python
trallard
47
3.8k
Making the Leap to Tech Lead
cromwellryan
135
9.8k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
990
Facilitating Awesome Meetings
lara
57
6.8k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.5k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
160
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.2k
エンジニアに許された特別な時間の終わり
watany
106
240k
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