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
830
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
robocopy の怖い話/scary-story-about-robocopy
emiki
0
400
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.3k
MCPに潜むセキュリティリスクを考えてみる
milix_m
1
870
怖くない!GritQLでBiomeプラグインを作ろうよ
pal4de
1
140
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
330
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
180
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
1.4k
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
760
AIエージェントを支える設計
tkikuchi1002
11
2.3k
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
280
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
660
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
270
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.1k
Practical Orchestrator
shlominoach
189
11k
Faster Mobile Websites
deanohume
308
31k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Building Adaptive Systems
keathley
43
2.7k
Speed Design
sergeychernyshev
32
1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Building Applications with DynamoDB
mza
95
6.5k
GitHub's CSS Performance
jonrohan
1031
460k
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