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
170
Elm
sporto
1
250
Redux: Flux Reduced
sporto
1
330
Practically Immutable
sporto
0
180
Rails with Webpack
sporto
1
210
Lesson learnt building Single Page Application
sporto
0
120
Grunt
sporto
1
170
Safe Testing in Ruby
sporto
1
120
Go - A great language for building web applications
sporto
1
320
Other Decks in Technology
See All in Technology
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
Bounded Context: Problem or Solution?
ewolff
1
210
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
Building Products in the LLM Era
ymatsuwitter
10
4.4k
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
Featured
See All Featured
Visualization
eitanlees
146
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Code Reviewing Like a Champion
maltzj
521
39k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
For a Future-Friendly Web
brad_frost
176
9.5k
Fireside Chat
paigeccino
34
3.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
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!