Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Webpack in Production

Theo Pak
March 22, 2016
Technology
1
220

Using Webpack in Production

A 5 minute lightning talk

Theo Pak

March 22, 2016
Tweet

More Decks by Theo Pak

See All by Theo Pak
React skeleton states save the day (and look good doing it)
theopak
3
590
React Performance Optimization
theopak
0
260
Cool Things About Docker
theopak
0
190
Arduino: Why, Which, and How
theopak
0
270
Bathchat
theopak
0
1k
Designing for Google Glass
theopak
3
390
Intro to Arduino - RPI Embedded Hardware Club (10 OCT 2013)
theopak
0
120
Intro to Arduino - RPI Embedded Hardware Club
theopak
0
180

Other Decks in Technology

See All in Technology
Stripe / Okta Customer Identity Cloud(旧Auth0) の採用に至った理由　〜モリサワの SaaS 戦略〜
tomuro
0
140
IoTを始めたきっかけの話と個人でできるIoTの今後 / 新年LT会「私の愛するIoT 2023」
you
0
250
OpenShiftクラスターのアップグレード自動化への挑戦！ / OpenShift Cluster Upgrade Automation
skitamura7446
0
210
02_プロトタイピングの進め方
kouzoukaikaku
0
770
Bill One 開発エンジニア 紹介資料
sansantech
PRO
0
130
イ良い日ンマを作る(USBストレージ容量偽装の手法) / USB Storage Capacity Faking Techniques
shutingrz
0
560
立ち止まっても、寄り道しても / even if I stop, even if I take a detour
katoaz
0
1k
マイクロサービス宣言から8年 振り返りとこれから / Eight Years After the Microservices Declaration A Look Back and A Look Ahead
eisuke
2
320
cdk deployに必要な権限ってなんだ？
kinyok
0
190
インフラ技術基礎勉強会 開催概要
toru_kubota
0
180
AWS Cloud Forensics & Incident Response
e11i0t_4lders0n
0
420
IoT から見る AWS re:invent 2022 ― AWSのIoTの歴史を添えて/Point of view the AWS re:invent 2022 with IoT - with a history of IoT in AWS
ma2shita
0
290

Featured

See All Featured
Into the Great Unknown - MozCon
thekraken
2
300
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
For a Future-Friendly Web
brad_frost
166
7.8k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
339
18k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
43k
Ruby is Unlike a Banana
tanoku
93
9.6k
Building Your Own Lightsaber
phodgson
96
4.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
Making the Leap to Tech Lead
cromwellryan
117
7.7k
Six Lessons from altMBA
skipperchong
15
2.3k
Three Pipe Problems
jasonvnalue
89
8.9k

Transcript

  1. using webpack in production Theo Pak [email protected] March 22, 2016

  2. 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.

  3. 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.

  4. 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.

  5. 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>

  6. <!DOCTYPE html> <html> <body> <div class="app"> </div> <script src="my-jquery-plugin.js"></script> <script

    src="jquery.min.js"></script> </body> </html>

  7. 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>

  8. webpack resolves dependencies

  9. 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

  10. /* 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>

  11. /* 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>

  12. Thanks! Theo Pak [email protected] ICE Cloud Engineering https://developer.cimpress.io