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
130
Rethink React in Elm
yhsiang
0
1k
開源與工程師的自我修養
yhsiang
0
160
Sayit in Taiwan
yhsiang
0
120
LY sayit
yhsiang
0
88
2015 Summer of ?
yhsiang
0
220
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
Analytics-Backed App Widget Development - Served with Jetpack Glance
miyabigouji
0
630
「家族アルバム みてね」における運用管理・ オブザーバビリティの全貌 / Overview of Operation Management and Observability in FamilyAlbum
isaoshimizu
4
160
とあるOSSを継続可能にするための取り組みについて / OSS Refactoring Process
bun913
1
210
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
280
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
3
390
Mocking in Rust Applications
taiki45
2
410
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
250
スタッフエンジニアの道: The Staff Engineer’s Path
snoozer05
PRO
44
14k
PDF Viewer作成の今までとこれから
hunachi
0
480
『GRANBLUE FANTASY Relink』キャラクターの魅力を支えるリグ・シミュレーション制作事例
cygames
0
150
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
240
『GRANBLUE FANTASY Relink』ソフトウェアラスタライザによる実践的なオクルージョンカリング
cygames
0
180
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Debugging Ruby Performance
tmm1
72
12k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
Visualization
eitanlees
142
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
A Tale of Four Properties
chriscoyier
155
22k
Docker and Python
trallard
39
3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
The Invisible Customer
myddelton
119
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
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