Pro Yearly is on sale from $80 to $50! »

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
430
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
120
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
64
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
130
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
400
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
3
240
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
78
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
130

Other Decks in Technology

See All in Technology
0deae06ab5d86b39feeec2e23a30b88a?s=48 yoku0825
2
150
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
120
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
230
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
140
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
130
5ad0bb268dd2605b09165d464308cb7e?s=48 igaiga
4
880
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
130
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
140
Cc568a0b1284645f9fb927b2343eb87e?s=48 youtalk
0
210
842515eaf8fbb2dfcc75197e7797dc15?s=48 sat
2
650
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
290
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
220

Featured

See All Featured
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
223
47k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
651
110k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
16
580
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.7k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
26
1.8k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
12k
11c84dff30266b907714802088852677?s=48 jasonvnalue
82
8k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.7k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
PRO
40
4.5k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
72
7.4k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
106
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