Using Webpack in Production

A 5 minute lightning talk

Transcript

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

   View Slide

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.
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

5. Problem: Why doesn’t this work?
   
   
   
   
   Why doesn’t this work?
   
   
   
   
   
   

   View Slide

6. 
   
   
   
   
   
   
   
   
   

   View Slide

7. Now it works!
   
   
   
   
   
   
   
   
   
   

   View Slide

8. webpack resolves dependencies
   

   View Slide

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
   

   View Slide

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
    
    
    
    
    <br/>
    
    
    

    View Slide

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
    
    
    
    
    <br/>
    
    
    

    View Slide

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

    View Slide