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
370
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
750
React Performance Optimization
theopak
0
380
Cool Things About Docker
theopak
0
320
Arduino: Why, Which, and How
theopak
0
430
Bathchat
theopak
0
1.4k
Designing for Google Glass
theopak
3
530
Intro to Arduino - RPI Embedded Hardware Club (10 OCT 2013)
theopak
0
170
Intro to Arduino - RPI Embedded Hardware Club
theopak
0
240
Other Decks in Technology
See All in Technology
Staff Engineer / 20240827 Yuichiro Masui
shift_evolve
0
160
タイミーのBraze活用 ~PUSH通知を活用したレコメンド~
ozeshun
2
130
ログラスが面白いと思う理由をマネージャーがエモく語ってみる / 20240829 vs LT
yoshikiiida
1
520
ロボットアームを遠隔制御の話 & LLMをつかったIoTの話もしたい
soracom
PRO
1
140
バックログを導入し やっぱやめた話
ota42y
0
170
AI でアップデートする既存テクノロジーと、クラウドエンジニアの生きる道
soracom
PRO
1
230
LLM を現場で評価する
asei
4
680
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
250
リクルートのデータマネジメント組織に 求められてきたコト
recruitengineers
PRO
4
350
2024年版 運用者たちのLLM
nwiizo
3
350
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
780
新しいことを組織ではじめる、そしてつづける
kzkmaeda
4
390
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Code Review Best Practice
trishagee
62
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
28
2.2k
Navigating Team Friction
lara
183
13k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.7k
GitHub's CSS Performance
jonrohan
1029
450k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Mobile First: as difficult as doing things right
swwweet
220
8.8k
What's in a price? How to price your products and services
michaelherold
241
11k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
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