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
410
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
800
React Performance Optimization
theopak
0
410
Cool Things About Docker
theopak
0
350
Arduino: Why, Which, and How
theopak
0
460
Bathchat
theopak
0
1.4k
Designing for Google Glass
theopak
3
570
Intro to Arduino - RPI Embedded Hardware Club (10 OCT 2013)
theopak
0
170
Intro to Arduino - RPI Embedded Hardware Club
theopak
0
250
Other Decks in Technology
See All in Technology
Agentic AI時代のプロダクトマネジメントことはじめ〜仮説検証編〜
masakazu178
0
210
アクセシブルなマークアップの上に成り立つユーザーファーストなドロップダウンメニューの実装 / 20250127_cloudsign_User1st_FE
bengo4com
1
1.1k
メンバーがオーナーシップを発揮しやすいチームづくり
ham0215
2
340
サーバレスの未来〜The Key to Simplifying Everything〜
kawaji_scratch
2
320
色々なAWSサービス名の由来を調べてみた
iriikeita
0
150
Mocking your codebase without cursing it
gaqzi
0
130
実践!生成AIのビジネス活用 / How to utilize Generative AI in your own business
gakumura
1
180
あなたはJVMの気持ちを理解できるか?
skrb
5
1.8k
今から、 今だからこそ始める Terraform で Azure 管理 / Managing Azure with Terraform: The Perfect Time to Start
nnstt1
0
280
インフラコストとセキュリティ課題解決のためのリアーキテクチャリング / srekaigi2025
hgsgtk
3
3.4k
ドメイン駆動設計によるdodaダイレクトのリビルド実践 / Rebuild practice of doda direct with domain-driven design
techtekt
0
390
dbtを中心にして組織のアジリティとガバナンスのトレードオンを考えてみた
gappy50
2
390
Featured
See All Featured
Being A Developer After 40
akosma
89
590k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Speed Design
sergeychernyshev
25
750
The Invisible Side of Design
smashingmag
299
50k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
5
200
Adopting Sorbet at Scale
ufuk
74
9.2k
How to train your dragon (web standard)
notwaldorf
89
5.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
BBQ
matthewcrist
85
9.4k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Faster Mobile Websites
deanohume
305
30k
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