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
320
Practically Immutable
sporto
0
170
Rails with Webpack
sporto
1
210
Lesson learnt building Single Page Application
sporto
0
110
Grunt
sporto
1
150
Safe Testing in Ruby
sporto
1
120
Go - A great language for building web applications
sporto
1
310
Other Decks in Technology
See All in Technology
Classmethod AI Talks(CATs) #1 司会進行スライド(2024.09.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol1_2024-09-19
shinyaa31
0
140
DuckDB雑紹介(1.1対応版)@DuckDB座談会
ktz
6
1.4k
Segment Anything Model 2
tenten0727
3
720
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
240
チームビルディングは"感性"で向き合おう / Team Building with Awareness
kohzas
0
270
技術的負債解消の取り組みと専門チームのお話
bengo4com
0
340
テスト”ケース”駆動開発 で手戻りをなくそう
ryohma0510
0
330
PDF Viewer作成の今までとこれから
hunachi
0
480
自作Cコンパイラ 8時間の奮闘
soukouki
0
850
横断組織として考える共通DBの課題解決 〜 桃園の誓いアーキテクチャ 〜 / Addressing Shared Database Challenges as Cross-Team: “Peach Garden Oath” Architecture
4geru
0
160
Cloud Run と GitHub Template Repository による軽量なアプリケーションプラットフォーム/ #nikkei_tech_talk
nikkei_engineer_recruiting
0
110
公共交通データとアプリ制作 - Mini Tokyo 3D の初期制作過程を振り返る
nagix
0
110
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
334
56k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
Fireside Chat
paigeccino
31
2.9k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Happy Clients
brianwarren
96
6.6k
Faster Mobile Websites
deanohume
304
30k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
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!