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

Want more?

287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
3
420
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
120
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
63
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
12
690
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
3
360
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
230
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
8
480
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
9
270
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
330
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
760
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
200
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
270

Transcript

  1. 1.

    using webpack in production Theo Pak tpak@cimpress.com March 22, 2016

  2. 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. 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. 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. 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. 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. 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. 8.

    webpack resolves dependencies

  9. 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. 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. 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. 12.

    Thanks! Theo Pak tpak@cimpress.com ICE Cloud Engineering https://developer.cimpress.io