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

Help me, Obi-Wan Kenobi - A webpack tale

E9a8393b5ad337ea9103d50169aa6d32?s=47 Lukas
November 02, 2018

Help me, Obi-Wan Kenobi - A webpack tale

- history of webpack
- some new feature in webpack v4

E9a8393b5ad337ea9103d50169aa6d32?s=128

Lukas

November 02, 2018
Tweet

Transcript

  1. Help me, Obi-Wan Kenobi A Webpack Tale M3 Techtalk #103

    2018/11/02 M3 Inc., Lukas Prasuhn
  2. About Me - Software Engineer @ M3 - 13y in

    Japan from Germany - Github: https://github.com/lukasjapan - bt-speaker - Bluetooth speaker Daemon for Raspberry Pi - koreander - Kotlin pug/haml style template engine - Tech I like - Raspberry Pi - Kotlin/Java - Ruby - ...
  3. A long time in a galaxy far far away... -

    Client Side JavaScript - Client Side only in Browser - First appeared in Netscape Navigator 2 (1995) - Server Side JavaScript - Netscape Enterprise Server - ISS (JScript) - ... - ECMA - European Computer Manufacturers Association
  4. Old school JavaScript - Globals everywhere! - Code pieces all

    over the place - Internet Explorer!! - JQuery - the lesser evil
  5. JavaScript gets mature - node.js (2009~) - server side -

    modules - separation of concerns - higher quality of libraries (imo) - reason for javascript success on github - No.1 language - npm / yarn (2010~) - package manager - npm.com
  6. But what about....?

  7. None
  8. None
  9. Browserify - 2011~ - node.js modules -> browser - require

    - lots of fixes - filesystem -> browser - process.nextTick - setImmediate - ... - JavaScript bundler - compile multiple files into one - that work in the browser
  10. Then Webpack appears!

  11. Then Webpack appears! - opinionated for front end development -

    extensible via plugins - all kinds of assets - files (images, fonts, …) - styles (css, sass) - … - and features - compression - optimization - ...
  12. Webpack brief version history - v0 (2012/3/12) - v1 (2014/2/20)

    - v2 (2017/1/18) - v3 (2017/6/19) - v4 (2018/2/25)
  13. What’s new in general? - plugins everybody used go into

    core - compression - speed improvements, etc - new tech - web assembly - ...
  14. Whats new in v4? (1) - default settings based on

    mode - i.e. no compression in development
  15. Whats new in v4? (2) - Zero config webpack!

  16. Whats new in v4 (3) - chunk strategies in the

    core - SplitChunksPlugin - Always check https://webpack.js.org/configuration/ before Google! - lots of info for old version on google/stack overflow, etc - better use the official webpack config options Reminder
  17. Let’s use webpack! The story continues...

  18. Another little fellow

  19. Projector added!

  20. Control panel - http://r2d2.cvguy.de - powered by - yarn -

    webpack - node - express - vue
  21. None
  22. None
  23. None
  24. None