Using Webpack in Production

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

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
340
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
3
220
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
77
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
130

Other Decks in Technology

See All in Technology
8a84268593355816432ceaf78777d585?s=48 dena_tech
1
2.2k
43a37af3a99834cd9c4b15806b5b4081?s=48 yoshiokacb
0
260
404b6b310d5fc7680a62ef09a463a794?s=48 yutakakinjyo
0
450
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
1.3k
9a22d09f92d50fa3d2a16766d0ba52f8?s=48 fabpot
4
1.9k
E4e01fb8b7105e61e3876224139503ab?s=48 niw
11
830
703c34db2db0e609fddec6a5585ceccc?s=48 kenta_sato3
2
160
Db8efd836c9a09b71e3d8e1c60d6ea84?s=48 colinfay
0
130
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
160
34fcd5f1deeb25b1138e9845137feb6e?s=48 kakutani
2
590
Ba0cce2241a7133aec62afc8ed15a172?s=48 kenjiszk
0
110
13d64bff196e33cc6b352f226137d16e?s=48 monoqlo
7
460

Featured

See All Featured
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
8
590
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
84
3.8k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
648
110k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
10
590
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
391
60k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
61
7.4k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
315
18k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
PRO
40
4.3k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
121
20k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
119
7.7k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
436
28k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
219
110k

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