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
95

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
130
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
65
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
140
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
460
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
3
240
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
79
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
130

Other Decks in Technology

See All in Technology
9cdb1d21375062bc2cd0d1358c2fa1f0?s=48 noir_neo
0
130
93c80c388fe9d8f9df7d030549a0ff0b?s=48 chaspy
3
1.1k
85da685d91fda190e2e3162d0de248a4?s=48 recruitengineers
0
150
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
48
16k
A49d01c48e10d19feb8e61310bceabab?s=48 _kensh
1
220
346406bb33c5e2389c5df9c74b0b98da?s=48 yoshiki0705
0
570
1ff811939fd0923df8321ec6d8bf9d4b?s=48 jxck
2
260
2917a3c430817eb71086f8973c06ebba?s=48 mukai21
2
600
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
170
Aa9bf3e6d625f90f2a3f9a47ba3154b4?s=48 youri
0
110
8284465a94bbdf1ea82cf1a67d55f447?s=48 kilometer
0
170
F2ccc400e285972d80feab0e4e57b5f7?s=48 fu3ak1
0
1.1k

Featured

See All Featured
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
321
53k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
9
550
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
8
510
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
437
28k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
660
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
8.8k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
342
26k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
21k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
206
6.8k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
52
3.4k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
258
24k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
19
820

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