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
110

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
460
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
150
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
86
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
160
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
640
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
3
280
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
92
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
140

Other Decks in Technology

See All in Technology
8bc2f1f5bfb8ed1f79492bfa7da6ddb1?s=48 hichikawa1126
1
280
252e6c31a6452aa80deb9ad0107975c7?s=48 attakei
0
180
932329c79bc511fdfed22abbd5ec92d2?s=48 rnakamuramartiny
0
200
928b1395afedebb5ee48d44ab917c5f1?s=48 ryusa
1
150
842515eaf8fbb2dfcc75197e7797dc15?s=48 sat
1
310
585cdfa5a081d53de7529e9b58926af2?s=48 kota2and3kan
0
500
44b799f91cc48e38c5fe9f5d9c5ecc61?s=48 takaichi00
0
630
1ff811939fd0923df8321ec6d8bf9d4b?s=48 jxck
1
660
5c4f5cafb8aa4f6258e5112412b3ab15?s=48 chisaki0120
0
120
A64ac825509279a770c13c6fc517f11a?s=48 kawaguti
5
790
4e7f712e4bba241f579d3dc0eaf130d4?s=48 mito201
0
390
86b08b89a4ccfc0847046d1abe60824a?s=48 yo41sawada
0
440

Featured

See All Featured
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
209
7.1k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
260
20k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
194
8.8k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
23
1.1k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
82
4.3k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
177
7.9k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
119
7.3k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
364
63k
78b475797a14c84799063c7cd073962f?s=48 holman
293
130k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
170
7.5k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
48
2.8k
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k

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