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

Using Webpack in Production

287abe4d8c0bf8eae92dd59b753f6323?s=47 Theo Pak
March 22, 2016
Technology
1
96

Using Webpack in Production

A 5 minute lightning talk

287abe4d8c0bf8eae92dd59b753f6323?s=128

Theo Pak

March 22, 2016
Tweet

More Decks by Theo Pak

See All by Theo Pak
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
3
440
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
130
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
65
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
140
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
500
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
3
250
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
80
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
140

Other Decks in Technology

See All in Technology
8a84268593355816432ceaf78777d585?s=48 dena_tech
1
140
19fc8f6113c5c3d86e6176362ff29479?s=48 kanaugust
PRO
0
160
24312cfba087ce175856b94b0829a3a9?s=48 uzabase_saas_product
0
100
8a84268593355816432ceaf78777d585?s=48 dena_tech
2
540
Cd823abda454a7a2065fe6fe273ae84b?s=48 viva_tweet_x
3
3k
Ad22fcf5773b906c08330f4d57242212?s=48 inductor
1
140
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
0
180
D6fc8a819afa94f464fe322032a6687f?s=48 mahito
0
220
96f06c7c9af1405aa0f0e4102b2812be?s=48 iwashi86
54
25k
B2517024bfcd3621738de6036a25b3e9?s=48 iwashi
1
210
842515eaf8fbb2dfcc75197e7797dc15?s=48 sat
40
29k
0411ad77d29734ecd0980c5b9b62848f?s=48 ch1aki
2
240

Featured

See All Featured
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
7.9k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
230
18k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
10
620
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
446
36k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
40k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
294
39k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
72
1.4k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
255
20k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
16k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
206
6.9k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
587
200k

Transcript

  1. using webpack in production Theo Pak tpak@cimpress.com 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 tpak@cimpress.com ICE Cloud Engineering https://developer.cimpress.io