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

Webpack

 Webpack

Maxime Thirouin

September 08, 2015
Tweet

More Decks by Maxime Thirouin

Other Decks in Programming

Transcript

  1. Webpack
    @MoOx

    View Slide

  2. Grunt, Gulp…
    @MoOx

    View Slide

  3. – Every body using a task runner
    “Let’s make another task for that”
    @MoOx

    View Slide

  4. @MoOx

    View Slide

  5. @MoOx

    View Slide

  6. @MoOx

    View Slide

  7. @MoOx

    View Slide

  8. {
    background: url(../../…)
    }
    ../.. ? ../ ? ./ ?
    @MoOx

    View Slide

  9. @MoOx

    View Slide

  10. @MoOx
    $ npm i -D webpack

    View Slide

  11. var myModule = require("./my-module.js")
    var myStyles = require("./my-module.css")
    var mySVG = require(“./my-module.svg")
    @import “./normalize.css”;
    body { background: url(landscape.jpg) }
    @MoOx

    View Slide

  12. Bundle using “loaders”
    @MoOx

    View Slide

  13. https://duckduckgo.com/?
    q=webpack+boilerplate
    @MoOx

    View Slide

  14. fr ?
    http://putaindecode.fr/posts/
    webpack/premier-exemple/
    @MoOx

    View Slide

  15. @MoOx
    https://github.com/cssnext/cssnext/blob/master/webpack.config.js
    https://github.com/putaindecode/putaindecode.fr/blob/master/webpack.config.js
    And more sur les internettes !
    Examples

    View Slide

  16. @MoOx
    ?

    View Slide

  17. @MoOx
    Bundle like a boss

    View Slide