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
1k
From React to React Native Web
yhsiang
0
150
Rethink React in Elm
yhsiang
0
1k
開源與工程師的自我修養
yhsiang
0
170
Sayit in Taiwan
yhsiang
0
130
LY sayit
yhsiang
0
110
2015 Summer of ?
yhsiang
0
260
How to be a good wan-jun
yhsiang
1
130
Experience in building isomorphic app
yhsiang
11
720
Other Decks in Technology
See All in Technology
チームビルディング「脅威モデリング」ワークショップ
koheiyoshikawa
0
190
AIエージェントの地上戦 〜開発計画と運用実践 / 2025/04/08 Findy W&Bミートアップ #19
smiyawaki0820
18
5.6k
20250328_RubyKaigiで出会い鯛_____RubyKaigiから始まったはじめてのOSSコントリビュート.pdf
mterada1228
0
460
大規模サービスにおける カスケード障害
takumiogawa
3
780
GitHub MCP Serverを使って Pull Requestを作る、レビューする
hiyokose
2
630
Multitenant 23ai の全貌 - 機能・設計・実装・運用からマイクロサービスまで
oracle4engineer
PRO
2
160
AIエージェント開発における「攻めの品質改善」と「守りの品質保証」 / 2024.04.09 GPU UNITE 新年会 2025
smiyawaki0820
0
310
Webアプリを Lambdaで動かすまでに考えること / How to implement monolithic Lambda Web Application
_kensh
7
750
Startups On Rails 2025 @ Tropical on Rails
irinanazarova
0
200
Agile TPIを活用した品質改善事例
tomasagi
0
630
古き良き Laravel のシステムは関数型スタイルでリファクタできるのか
leveragestech
1
390
NLP2025 参加報告会 / NLP2025
sansan_randd
4
410
Featured
See All Featured
Embracing the Ebb and Flow
colly
85
4.6k
The Invisible Side of Design
smashingmag
299
50k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
640
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Thoughts on Productivity
jonyablonski
69
4.6k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Into the Great Unknown - MozCon
thekraken
36
1.7k
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