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
1.1k
From React to React Native Web
yhsiang
0
160
Rethink React in Elm
yhsiang
0
1.1k
開源與工程師的自我修養
yhsiang
0
180
Sayit in Taiwan
yhsiang
0
140
LY sayit
yhsiang
0
120
2015 Summer of ?
yhsiang
0
270
How to be a good wan-jun
yhsiang
1
140
Experience in building isomorphic app
yhsiang
11
730
Other Decks in Technology
See All in Technology
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
2
230
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
150
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
160
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
210
IIWレポートからみるID業界で話題のMCP
fujie
0
740
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
230
2025/6/21 日本学術会議公開シンポジウム発表資料
keisuke198619
2
480
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
4.7k
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
0
140
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
7
780
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
hideakiaoyagi
1
190
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
opelab
9
2.2k
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Bash Introduction
62gerente
614
210k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Invisible Side of Design
smashingmag
299
51k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
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