Using Webpack in Production

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

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
420
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
120
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
63
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
130
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
330
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
3
220
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
76
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
130

Other Decks in Technology

See All in Technology
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
320
53850955f15249a1a9dc49df6113e400?s=48 line_developers
0
120
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
0
210
Ca7f3070b0edb9ec3e1b5b5109920a8a?s=48 hiyokotaisa
2
1.4k
C0699dfab8761ccede864ec5079519d7?s=48 lrf141
0
210
Ad22fcf5773b906c08330f4d57242212?s=48 inductor
13
1.9k
5c3556b7c8c0ab6bc90a62161a8315f8?s=48 gracia
0
390
26a00012c475c2380cd98cfe5e2e70ef?s=48 ozaki25
0
200
69b4dadef85efe143ac825b62d36ed7c?s=48 fruitriin
2
230
C5e26822fb2aa64410b50eac63ef7d84?s=48 fill9120
1
210
Ecad9d801d79f6c6e5df93094690685e?s=48 sinsoku
6
820
Ecdea9b9714877b86cee08458f085481?s=48 trallard
5
200

Featured

See All Featured
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
104
10k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
164
6.7k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
681
180k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
447
35k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
154
11k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
323
14k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
195
9.4k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
340
25k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
144
6.4k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1348
190k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
60
2.4k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
652
54k

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