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
990
From React to React Native Web
yhsiang
0
120
Rethink React in Elm
yhsiang
0
1k
開源與工程師的自我修養
yhsiang
0
160
Sayit in Taiwan
yhsiang
0
110
LY sayit
yhsiang
0
82
2015 Summer of ?
yhsiang
0
190
How to be a good wan-jun
yhsiang
1
120
Experience in building isomorphic app
yhsiang
11
690
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
37k
MixIT 2024 - Pulumi : Gérer son infra avec son langage de programmation préféré
ju_hnny5
1
120
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
190
uvを使ってストレスフリーな Python開発をしよう!
r74tech
0
260
QAエンジニアが伝えたい品質保証の羅針盤 / Compass for Quality Assurance
mii3king
1
180
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.5k
NewSQL Landscape
oracle4engineer
PRO
2
2.6k
【SORACOM UG 東海】あらゆるモノがつながる社会へ、IoT と SORACOM
soracom
PRO
1
360
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
1
430
CockroachDB はどのくらい「しぶとい」のか? / How tough is CockroachDB?
kota2and3kan
6
3.9k
Rustで「プリズモイダル法」を利用して「土量計算」をガチでやる
nokonoko1203
1
360
しくじり先生、PharmaXのLLMアプリケーション開発の失敗を語る
pharma_x_tech
0
130
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1k
Debugging Ruby Performance
tmm1
70
11k
Agile that works and the tools we love
rasmusluckow
325
20k
Faster Mobile Websites
deanohume
300
30k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Why Our Code Smells
bkeepers
PRO
331
56k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
66
14k
Building Your Own Lightsaber
phodgson
100
5.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
0
46
How GitHub (no longer) Works
holman
305
140k
BBQ
matthewcrist
80
8.8k
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