Help me, Obi-Wan Kenobi - A webpack tale

- history of webpack
- some new feature in webpack v4

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....?
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