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
120

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
470
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
160
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
97
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
180
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
690
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
3
300
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
96
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
150

Other Decks in Technology

See All in Technology
B79e8f240b4b730fb692ab93ad42a89b?s=48 darquro
2
310
1ec68e792f99c958b8ffbd0aadaa182a?s=48 ikkou
1
150
85da685d91fda190e2e3162d0de248a4?s=48 recruitengineers
4
260
3009eedce0d0f7ae45987a7bd8f57b85?s=48 nkjzm
0
140
Eb6be531bcfaa99714d8d3b48665a5a9?s=48 budougumi0617
2
700
B49933741d74e122bc1314b2975e9fc9?s=48 mrtc0
3
290
7a0bc9670ff654b04d4361a9afd1bba8?s=48 hcrane
3
920
1283cb5a2c4dffa362a16e3009eba1b5?s=48 poya
0
160
00851927294532e0742c2c174730dff0?s=48 ido_kara_deru
1
120
98fd7d759e70809e826fd3a35e9fe2cb?s=48 hisaotsu
2
280
Cc568a0b1284645f9fb927b2343eb87e?s=48 youtalk
0
100
0350fb935be160186cd72472c9e5543b?s=48 hayaosuzuki
0
300

Featured

See All Featured
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
105
11k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
6
740
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
55
3k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
364
63k
11c84dff30266b907714802088852677?s=48 jasonvnalue
87
8.3k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.6k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
277
17k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
52
3.3k
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
PRO
2
7.4k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
482
150k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
77
270k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
314
18k

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