Webpack

What is webpack ?

- http://webpack.github.io
- https://duckduckgo.com/?q=webpack+boilerplate
- http://putaindecode.fr/posts/webpack/premier-exemple/
- https://github.com/cssnext/cssnext/blob/b5ece99c1e1b5e4cdfd6c25f856946bbcbc2247c/webpack.config.js
- https://github.com/putaindecode/putaindecode.fr/blob/3a3b7a25d04da230158f3ec375bd6c8cb65a2950/webpack.config.js

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