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
Using Webpack in Production
Search
Theo Pak
March 22, 2016
Technology
1
320
Using Webpack in Production
A 5 minute lightning talk
Theo Pak
March 22, 2016
Tweet
Share
More Decks by Theo Pak
See All by Theo Pak
React skeleton states save the day (and look good doing it)
theopak
3
700
React Performance Optimization
theopak
0
350
Cool Things About Docker
theopak
0
280
Arduino: Why, Which, and How
theopak
0
390
Bathchat
theopak
0
1.3k
Designing for Google Glass
theopak
3
500
Intro to Arduino - RPI Embedded Hardware Club (10 OCT 2013)
theopak
0
150
Intro to Arduino - RPI Embedded Hardware Club
theopak
0
220
Other Decks in Technology
See All in Technology
Terraformあれやこれ/terraform-this-and-that
emiki
5
470
テストプロセスで大事にしていること #jasstnano
makky_tyuyan
0
130
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
190
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.9k
小さな開発会社がWebサービスを作る理由
polidog
PRO
1
160
巨大なテーブルのテーブル定義を無停止で安全に誰でも変更できるようにする / Table-definitions-for-huge-tables-can-be-modified-by-anyone-safely-and-non-disruptively
freee
1
740
シン・Kafka / shin-kafka
oracle4engineer
PRO
7
2.7k
ユーザーストーリーのレビューを自動化したみたの
bun913
1
330
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
340
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
4
110
入社後初めてのタスクでk8sアップグレードした話.pdf
kkato1
1
380
クラウドサインにおけるプロダクトマネージャーの役割と開発プロセス / 20240410_cloudsign-PdM
bengo4com
1
680
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
Agile that works and the tools we love
rasmusluckow
324
20k
The Illustrated Children's Guide to Kubernetes
chrisshort
29
46k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Design by the Numbers
sachag
274
18k
Become a Pro
speakerdeck
PRO
10
4.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Music & Morning Musume
bryan
41
5.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
Gamification - CAS2011
davidbonilla
76
4.6k
Transcript
using webpack in production Theo Pak
[email protected]
March 22, 2016
ICE Cloud Engineering Cloud Engineering uses webpack to create production
builds of our web app, MCP Portal. Try it! developer.cimpress.io The MCP Portal has used webpack since v0.
ICE Cloud Engineering Cloud Engineering uses webpack to create production
builds of our web app, MCP Portal. Try it! developer.cimpress.io The MCP Portal has used webpack since v0.
ICE Cloud Engineering Cloud Engineering uses webpack to create production
builds of our web app, MCP Portal. Try it! developer.cimpress.io The MCP Portal has used webpack since v0.
Problem: Why doesn’t this work? <!DOCTYPE html> <html> <body> <div
class="app"> Why doesn’t this work? </div> <script src="my-jquery-plugin.js"></script> <script src="jquery.min.js"></script> </body> </html>
<!DOCTYPE html> <html> <body> <div class="app"> </div> <script src="my-jquery-plugin.js"></script> <script
src="jquery.min.js"></script> </body> </html>
Now it works! <!DOCTYPE html> <html> <body> <div class="app"> </div>
<script src="jquery.min.js"></script> <script src="my-jquery-plugin.js"></script> </body> </html>
webpack resolves dependencies
Building with webpack # Let’s take these files, and build
# a minified ‘bundle.js’ $ ls ├── app.css ├── app.js ├── demo.js ├── index.html └── node_modules ├── d3 └── lodash # …using webpack! $ webpack app.js bundle.js -p Hash: cccda8d0a3eed410cbc9 Version: webpack 1.12.14 Time: 3477ms Asset Size Chunks bundle.js 7.5 MB 0 # That’s it! Now bundle.js exists # and you can use it from your app. $ open index.html
/* app.css */ html, body { font-family: "Comic Sans MS";
color: red; background-color: pink; } #app { margin: 0 auto; background-color: teal; } /* app.js */ // use CommonJS or // AMD require syntax var d3 = require('d3') var myApp = require('demo.js') // use webpack loaders // for other file types require('app.css') // Now write your code (function () { console.log('ready') var svg = d3.select('#app') .append('svg') myApp.start(svg) }) Building with webpack # Let’s take these files, and build # a minified ‘bundle.js’ $ ls ├── app.css ├── app.js ├── demo.js ├── index.html └── node_modules ├── d3 └── lodash # …using webpack! $ webpack app.js bundle.js -p Hash: cccda8d0a3eed410cbc9 Version: webpack 1.12.14 Time: 3477ms Asset Size Chunks bundle.js 7.5 MB 0 # That’s it! Now bundle.js exists # and you can use it from your app. $ open index.html <!DOCTYPE html> <html> <body> <div id="app"></div> <script src="bundle.js"> </script> </body> </html>
/* app.css */ html, body { font-family: "Comic Sans MS";
color: red; background-color: pink; } #app { margin: 0 auto; background-color: teal; } /* app.js */ // use CommonJS or // AMD require syntax var d3 = require('d3') var myApp = require('demo.js') // use webpack loaders // for other file types require('app.css') // Now write your code (function () { console.log('ready') var svg = d3.select('#app') .append('svg') myApp.start(svg) }) Building with webpack # Let’s take these files, and build # a minified ‘bundle.js’ $ ls ├── app.css ├── app.js ├── demo.js ├── index.html └── node_modules ├── d3 └── lodash # …using webpack! $ webpack app.js bundle.js -p Hash: cccda8d0a3eed410cbc9 Version: webpack 1.12.14 Time: 3477ms Asset Size Chunks bundle.js 7.5 MB 0 # That’s it! Now bundle.js exists # and you can use it from your app. $ open index.html <!DOCTYPE html> <html> <body> <div id="app"></div> <script src="bundle.js"> </script> </body> </html>
Thanks! Theo Pak
[email protected]
ICE Cloud Engineering https://developer.cimpress.io