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
430
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
820
React Performance Optimization
theopak
0
440
Cool Things About Docker
theopak
0
370
Arduino: Why, Which, and How
theopak
0
480
Bathchat
theopak
0
1.5k
Designing for Google Glass
theopak
3
600
Intro to Arduino - RPI Embedded Hardware Club (10 OCT 2013)
theopak
0
180
Intro to Arduino - RPI Embedded Hardware Club
theopak
0
270
Other Decks in Technology
See All in Technology
AI専用のリンターを作る #yumemi_patch
bengo4com
6
4.3k
Claude Code に プロジェクト管理やらせたみた
unson
6
4.3k
ゼロからはじめる採用広報
yutadayo
3
970
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.8k
Delegating the chores of authenticating users to Keycloak
ahus1
0
160
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
150
OPENLOGI Company Profile
hr01
0
67k
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
480
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
3.9k
Featured
See All Featured
Side Projects
sachag
455
42k
For a Future-Friendly Web
brad_frost
179
9.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
How to train your dragon (web standard)
notwaldorf
95
6.1k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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