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
220
Redux: Flux Reduced
sporto
1
320
Practically Immutable
sporto
0
160
Rails with Webpack
sporto
1
210
Lesson learnt building Single Page Application
sporto
0
100
Grunt
sporto
1
140
Safe Testing in Ruby
sporto
1
110
Go - A great language for building web applications
sporto
1
290
Other Decks in Technology
See All in Technology
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
340
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
120
AWS アーキテクチャクイズ
yuu26
2
700
XRミーティング 2024-03-20
1ftseabass
PRO
0
100
データ化エンジニアとしての1年を振り返る
sansantech
PRO
3
260
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
220
戦略的DDDを実践するための跳躍力 / OOC 2024
pictiny
6
4.2k
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
210
社内共通ルールを値オブジェクトにして社内ライブラリとして運用してみた話
leveragestech
2
1.2k
単回帰分析について数式を追いながら実装してみた
kentaitakura
0
510
GraphQLに入門してみた
chiroruxx
2
130
Getting started with controlling LEGO using Swift
hcrane
0
140
Featured
See All Featured
Writing Fast Ruby
sferik
619
59k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Building Adaptive Systems
keathley
29
1.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
How to name files
jennybc
62
92k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.8k
A designer walks into a library…
pauljervisheath
199
23k
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!