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 and React
Search
sporto
March 03, 2015
Technology
4
380
Webpack and React
Webpack is a great fit for React.js applications, this decks explains the major features of Webpack
sporto
March 03, 2015
Tweet
Share
More Decks by sporto
See All by sporto
React inside Elm
sporto
2
180
Elm
sporto
1
250
Redux: Flux Reduced
sporto
1
330
Practically Immutable
sporto
0
190
Rails with Webpack
sporto
1
220
Lesson learnt building Single Page Application
sporto
0
120
Grunt
sporto
1
180
Safe Testing in Ruby
sporto
1
130
Go - A great language for building web applications
sporto
1
340
Other Decks in Technology
See All in Technology
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
210
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
500
フレームワークを意識させないワークショップづくり
keigosuda
0
210
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
510
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
130
Wasmのエコシステムを使った ツール作成方法
askua
0
220
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
310
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.9k
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
4
2.1k
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
140
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.5k
Featured
See All Featured
Building Adaptive Systems
keathley
44
2.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Music & Morning Musume
bryan
46
6.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
870
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Producing Creativity
orderedlist
PRO
347
40k
Become a Pro
speakerdeck
PRO
29
5.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Faster Mobile Websites
deanohume
310
31k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Transcript
Webpack @sebasporto
React Components
Globals :( App.List = React.createClass({ ... }) React.render(<App.List />, ...)
? Will just pack everything
What we want = resolve dependencies Dead code
CommonJS :) module.exports = React.createClass({ ... }) var List =
require('./list') React.render(<List />, ...)
Webpack == Just what we need
★ CommonJS ★ AMD ★ ES6
Multiple entry points
/users /dashboard users-bundle.js dashboard-bundle.js
Entry points entry: { common: "./fe/ap/common.js", dashboard: "./fe/ap/dashboard.jsx", ... },
JSX JS ES6 Loaders Coffeescript
Loaders loaders: [ { test: /\.css/, loader: "style-loader!css-loader" }, {
test: /\.jsx$/, loader: "jsx-loader?stripTypes" }, ...
CSS Code Images Fonts JS JSX ES6 Coffee Less Sass
SVG Jpeg png eot ttf Templates
Loaders can have parameters Read JSX Remove Flow annotations Output
JS { test: /\.jsx$/, loader: "jsx-loader?stripTypes" },
Loaders can be chained Convert LESS to CSS Loads CSS
Inject CSS in document { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
Interesting loaders ★ jsx loader ★ autoprefixer-loader
Images ★ base64 encoded ★ binary data as ASCII
Plug-ins
Operate on the entire bundles Interim bundles Source code Plug-ins
Final bundles
Plug-ins, e.g. ★ Stats ★ Uglify ★ Dedupe ★ Write
HTML ★ Localisations
Load on demand Split Chunk Chunk
On demand require.ensure(["foo", "bar"], function(require) { var foo = require("foo");
// ... }); load foo and bar on demand exec the rest when loaded
NPM integration ★ Install libs using NPM ★ Package.json for
dependencies ★ Use NPM packages from your code
Using webpack ★ npm install webpack -g ★ Create webpack.config.js
★ Run a watcher
Watcher $ webpack --watch Only rebuilds touched files
Or dev server $ webpack-dev-server <script src="http://localhost:8080/webpack-dev- server.js"></script> <script src="http://localhost:8080/js/foo-
bundle.js"></script>
Hot loader https://github.com/gaearon/react-hot-loader ★ Supposed to be great ★ I
haven't used it yet
For production Webpack Source code Development bundles Deployment Pipeline Production
bundles Sprockets
Dependency visualisation http://webpack.github.io/analyse/
Browserify? They do almost the same Plug-in based Batteries included
The bad parts: Documentation!
Resources ★ Official documentation == :( ★ https://github.com/ petehunt/webpack-howto ?
Webpack is brilliant Can do almost anything
Thanks!