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
140
Rethink React in Elm
yhsiang
0
1k
開源與工程師的自我修養
yhsiang
0
160
Sayit in Taiwan
yhsiang
0
120
LY sayit
yhsiang
0
89
2015 Summer of ?
yhsiang
0
230
How to be a good wan-jun
yhsiang
1
120
Experience in building isomorphic app
yhsiang
11
700
Other Decks in Technology
See All in Technology
使えそうで使われないCloudHSM
maikamibayashi
0
170
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
Gradle: The Build System That Loves To Hate You
aurimas
2
150
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
480
APIテスト自動化の勘所
yokawasa
7
4.2k
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
130
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.5k
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
120
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
4
4.6k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
39
2.4k
What's new in Ruby 2.0
geeforr
342
31k
It's Worth the Effort
3n
183
27k
Visualization
eitanlees
144
15k
Fireside Chat
paigeccino
32
3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
How to train your dragon (web standard)
notwaldorf
88
5.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Facilitating Awesome Meetings
lara
49
6k
Agile that works and the tools we love
rasmusluckow
327
21k
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