Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Using Webpack in Production
Theo Pak
March 22, 2016
Technology
1
180
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
540
React Performance Optimization
theopak
0
210
Cool Things About Docker
theopak
0
140
Arduino: Why, Which, and How
theopak
0
230
Bathchat
theopak
0
840
Designing for Google Glass
theopak
3
350
Intro to Arduino - RPI Embedded Hardware Club (10 OCT 2013)
theopak
0
110
Intro to Arduino - RPI Embedded Hardware Club
theopak
0
160
Other Decks in Technology
See All in Technology
AWS CLI入門_20220513
suzakiyoshito
0
3.4k
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
2.8k
Power BIのモバイルと都 +1 / Tokyo
ishiayaya
0
130
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.1k
mROS 2のススメ
takasehideki
0
290
Power Query 日時の変換でちょっと焦ったケース +1 / Power Query Some cases
ishiayaya
0
140
1,000万人以上が利用する「家族アルバム みてね」のSRE組織は4年間でどのように作られてきたのか/SRE NEXT 2022
isaoshimizu
4
2.5k
ZOZOTOWNのProduction Readiness Checklistと信頼性向上の取り組み / Improvement the reliability of ZOZOTOWN with Production Readiness Checklist
akitok_
5
1.3k
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
flatt_security
2
2.2k
Microsoft Power Automate で 始めるRPAと自動化
taikiyoshida
0
1.9k
220510 プロセスマイニングを学ぶ PLAY与田さん
comucal
PRO
0
500
プロダクトグロースと技術のベースアップを両立させるRettyのアプリ開発スタイル / Achieve Product Growth and Tech Update
imaizume
1
260
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
21
5.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
314
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
890
WebSockets: Embracing the real-time Web
robhawkes
57
5k
Designing Experiences People Love
moore
130
22k
Raft: Consensus for Rubyists
vanstee
126
5.4k
Building Flexible Design Systems
yeseniaperezcruz
310
33k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
103
16k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
Transcript
using webpack in production Theo Pak tpak@cimpress.com 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 tpak@cimpress.com ICE Cloud Engineering https://developer.cimpress.io