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
170
Rethink React in Elm
yhsiang
0
1.1k
開源與工程師的自我修養
yhsiang
0
190
Sayit in Taiwan
yhsiang
0
150
LY sayit
yhsiang
0
130
2015 Summer of ?
yhsiang
0
280
How to be a good wan-jun
yhsiang
1
140
Experience in building isomorphic app
yhsiang
11
740
Other Decks in Technology
See All in Technology
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
610
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
450
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
380
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
5
760
エンジニアが主導できる組織づくり ー 製品と事業を進化させる体制へのシフト
ueokande
1
100
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
330
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
roppongirb_20250911
igaiga
1
240
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
580
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
74
5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
Rails Girls Zürich Keynote
gr2m
95
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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