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
97

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
440
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
130
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
67
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
140
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
520
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
3
250
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
85
287abe4d8c0bf8eae92dd59b753f6323?s=48 theopak
0
140

Other Decks in Technology

See All in Technology
B1bddcb899ec3060fe9913f3cb70dbb6?s=48 lmt_swallow
0
220
40301c0affdf359eaca771713e22b71a?s=48 harshbothra
0
240
Db56c5975c67fcabeb1a395b835fa250?s=48 brtriver
1
540
C265a1a7dadb2713ff2262025e91d133?s=48 akabekobeko
0
240
7c499b609f882f2d33b3259469c1e192?s=48 ainehanta
0
110
098ad475722e3697ec2fba28c8654f9f?s=48 yuhta28
0
170
0d9e60b12d0a40841b1a746b112ad36b?s=48 aamine
4
950
7fb7baff24528be4d8b6e0e6cf831b81?s=48 tj8000rpm
0
250
Cd931bc05e7cee46b9a950a63e47ba4c?s=48 you
0
160
73dfdf58c8072916f1b4c62c93279fd7?s=48 yuzoiwasaki
0
170
53850955f15249a1a9dc49df6113e400?s=48 line_developers
PRO
2
190
Bf7fe621f4fe1615c228ef8a79b87282?s=48 shirayanagiryuji
1
210

Featured

See All Featured
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
88
4k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
114
25k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
629
48k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
257
17k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
330
15k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
283
47k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
204
37k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
226
8.7k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
252
11k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
221
15k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
157
6.5k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5.5k

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