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
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.4k
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
12
3.6k
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
200
Wasmで社内ツールを作って配布しよう
askua
0
150
SAE J1939シミュレーション環境構築
daikiokazaki
1
180
KCD Lima: eBee in Peru!
lizrice
0
100
RapidPen: AIエージェントによる高度なペネトレーションテスト自動化の研究開発
laysakura
1
400
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
510
地図と生成AI
nakasho
0
790
ファインディにおける Dataform ブランチ戦略
hiracky16
0
180
AIエージェントを支える設計
tkikuchi1002
4
900
alecthomas/kong はいいぞ
fujiwara3
2
290
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
4 Signs Your Business is Dying
shpigford
184
22k
Documentation Writing (for coders)
carmenintech
72
4.9k
Scaling GitHub
holman
461
140k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Navigating Team Friction
lara
187
15k
Producing Creativity
orderedlist
PRO
346
40k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
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!