Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Webpack in Production

Theo Pak
March 22, 2016

Using Webpack in Production

A 5 minute lightning talk

Theo Pak

March 22, 2016
Tweet

More Decks by Theo Pak

Other Decks in Technology

Transcript

  1. using webpack in production
    Theo Pak
    [email protected]
    March 22, 2016

    View full-size 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 full-size 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 full-size 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 full-size slide

  5. Problem: Why doesn’t this work?




    Why doesn’t this work?





    View full-size slide

  6. Now it works!









    View full-size slide

  7. webpack resolves dependencies

    View full-size slide

  8. 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 full-size slide

  9. /* 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 full-size 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 full-size slide

  11. Thanks!
    Theo Pak

    [email protected]

    ICE Cloud Engineering

    https://developer.cimpress.io

    View full-size slide