Tobias Koppers's guest appearances

Tobias Koppers

JavaScript Air

programmier.bar – der Podcast für App- und Webentwicklung

Adam Argyle

Jessica Lord

Rachel Nabors

Omoju Miller

Lin Clark

Brendan Eich

Lee Byron

Taylor Otwell

Sarah Drasner

Jamund Ferguson

Kate Edwards

Dan Abramov

Robert Jackson

Henry Zhu

Ken Wheeler

OwlTail

Wie funktioniert die Arbeit an Webpack, dem größten JavaScript Module Bundler? Wir haben Tobias Koppers, Gründer von Webpack, in dieser Folge zu Gast und er beantwortet unsere organisatorischen Fragen zum Open-Source-Projekt. Im Allgemeinen führt ein Module Bundler verschiedene JavaScript-Dateien zusammen und bündelt sie zu einer einzigen, um sie für den Browser möglichst einfach handhabbar zu machen. Webpack geht noch einen Schritt weiter und unterstützt zusätzlich Code-Splitting im Browser und das Packen jeglicher Art von Assets. Spätestens seit vor einigen Jahren bekannt wurde, dass Tobias’ Lösung von Instagram verwendet wird, ist sie in der Webentwicklung zum Standard geworden. Lange hat er allein daran gearbeitet, nun aber können verschiedenste Akteure ihre Arbeit beitragen – so auch ihr! Tobias erzählt uns, wie sich Webpack organisiert und wie die Finanzierung eines so großen Projekts funktionieren kann. Timecodes: (01:46) Was ist Webpack und wie startete Tobias dieses Projekt? (08:25) Wie finanziert sich Webpack und wer arbeitet daran? (13:18) Konkurrenz und Austausch zwischen den Module Bundlern (15:48) Kommunikation und Zusammenarbeit der Teams (16:56) Der typische Anwendungsfall und erste Schritte mit Webpack (21:25) Features für die lokale Entwicklung (DevServer) (25:57) Wie werden neue Features entwickelt? (27:35) Loader und Plugins (34:30) Code Splitting (38:11) Was erwartet uns in Webpack 5? (46:07) Wie wird bei Webpack getestet? (50:09) Release Cycles und Kompatibilität zukünftiger Features Ihr wollt inhaltlich mehr über Webpack erfahren? Euch interessiert, wie wir Webpack verwenden und was unsere liebsten Plugins und Loader sind? In Folge 29 haben wir über diese Themen gesprochen, hört doch mal rein! Weitere Links: Integrationstests sorgen dafür, dass eine Änderung keinen übergeordneten Schaden anrichtet. Verschiedene Testfälle sind in GitHub abgebildet. Noch mehr Infos über Webpack! Tobias ist als @wSokra auf Twitter unterwegs. Streamt uns! Wann das nächste Live-Event stattfindet, erfahrt ihr über die folgenden Quellen und unsere Webseite. Schreibt uns! Schickt uns eure Themenwünsche und euer Feedback. podcast@programmier.bar Folgt uns! Bleibt auf dem Laufenden über zukünftige Folgen und virtuelle Meetups und beteiligt euch an Community-Diskussionen. Twitter Instagram Facebook Meetup Musik: Hanimo

Wie funktioniert die Arbeit an Webpack, dem größten JavaScript Module Bundler? Wir haben Tobias Koppers, Gründer von Webpack, in dieser Folge zu Gast und er beantwortet unsere organisatorischen Fragen zum Open-Source-Projekt. Im Allgemeinen führt ein Module Bundler verschiedene JavaScript-Dateien zusammen und bündelt sie zu einer einzigen, um sie für den Browser möglichst einfach handhabbar zu machen. Webpack geht noch einen Schritt weiter und unterstützt zusätzlich Code-Splitting im Browser und das Packen jeglicher Art von Assets. Spätestens seit vor einigen Jahren bekannt wurde, dass Tobias’ Lösung von Instagram verwendet wird, ist sie in der Webentwicklung zum Standard geworden. Lange hat er allein daran gearbeitet, nun aber können verschiedenste Akteure ihre Arbeit beitragen – so auch ihr! Tobias erzählt uns, wie sich Webpack organisiert und wie die Finanzierung eines so großen Projekts funktionieren kann. Timecodes: (01:46) Was ist Webpack und wie startete Tobias dieses Projekt? (08:25) Wie finanziert sich Webpack und wer arbeitet daran? (13:18) Konkurrenz und Austausch zwischen den Module Bundlern (15:48) Kommunikation und Zusammenarbeit der Teams (16:56) Der typische Anwendungsfall und erste Schritte mit Webpack (21:25) Features für die lokale Entwicklung (DevServer) (25:57) Wie werden neue Features entwickelt? (27:35) Loader und Plugins (34:30) Code Splitting (38:11) Was erwartet uns in Webpack 5? (46:07) Wie wird bei Webpack getestet? (50:09) Release Cycles und Kompatibilität zukünftiger Features Ihr wollt inhaltlich mehr über Webpack erfahren? Euch interessiert, wie wir Webpack verwenden und was unsere liebsten Plugins und Loader sind? In <a href="https://www.programmier.bar/podcast-episodes/folge-29-webpack-und-andere-module-bundler" rel="nofollow" target="_blank">Folge 29</a> haben wir über diese Themen gesprochen, hört doch mal rein! Weitere Links: <ul><li>Integrationstests sorgen dafür, dass eine Änderung keinen übergeordneten Schaden anrichtet. <a href="https://github.com/webpack/webpack/tree/master/test/cases" rel="nofollow" target="_blank">Verschiedene Testfälle sind in GitHub abgebildet</a>. </li><li><a href="https://webpack.js.org/" rel="nofollow" target="_blank">Noch mehr Infos über Webpack!</a> </li></ul>Tobias ist als <a href="https://twitter.com/wSokra" rel="nofollow" target="_blank">@wSokra auf Twitter</a> unterwegs. Streamt uns! Wann das nächste Live-Event stattfindet, erfahrt ihr über die folgenden Quellen und <a href="https://www.programmier.bar/live" rel="nofollow" target="_blank">unsere Webseite</a>. Schreibt uns! Schickt uns eure Themenwünsche und euer Feedback. <a href="mailto:podcast@programmier.bar">podcast@programmier.bar</a> Folgt uns! Bleibt auf dem Laufenden über zukünftige Folgen und virtuelle Meetups und beteiligt euch an Community-Diskussionen. <a href="https://twitter.com/programmierbar?lang=de" rel="nofollow" target="_blank">Twitter</a> <a href="https://www.instagram.com/programmier.bar/?hl=de" rel="nofollow" target="_blank">Instagram</a> <a href="https://www.facebook.com/programmier.bar/" rel="nofollow" target="_blank">Facebook</a> <a href="https://www.meetup.com/de-DE/programmierbar/events/" rel="nofollow" target="_blank">Meetup</a> Musik:<a href="https://open.spotify.com/track/67wagdqqdGsiWpDr0rHSqO?si=yZVGodtqSXa_blvptNrdoA" rel="nofollow" target="_blank"> Hanimo</a>

Folge 59 - Webpack mit dem Gründer Tobias Koppers

Juho Vepsäläinen

Johannes Ewald

Sean T. Larkin

webpack: JavaScript bundler with Juho Vepsäläinen, Johannes Ewald, Sean T. Larkin, and Tobias KoppersDescription:webpack is an amazing bundler for frontend assets. For many people it has completely changed the game for their build pipeline, entirely replacing other build tools and task runners like grunt and gulp. Join us with the webpack creator and core contributors as we talk with the webpack team about this impressive piece of tech.Show sponsors:Egghead.io - Bite-sized web development video training Frontend Masters - Expert front-end training {Track:js} - JavaScript Error Monitoring SparkPost - Email. We've Got It Down. WebStorm - Smart JavaScript IDE Trading Technologies - Building For What's NextLinks, Picks, and Tips:Juho VepsäläinenLinks: webpack-merge - My merge tool to keep configuration simple (sharing common config!), webpack-validator - Validation of webpack configuration against a schema + checks against good practices., and SurviveJS Webpack book - Free book on the topic. Tips: There is always something new to learn (esp. In frontend). and Fundamentals &gt; specifics. Picks: WebpackBin and autojump - a faster way to navigate your filesystem  Johannes EwaldLinks: LearnYouAHaskell.com – Good resource for learning functional concepts with Haskell., html-webpack-plugin – Almost always a good idea when you’re also bundling CSS with webpack., ProvidePlugin – Solves many problems introduced by legacy scripts and implicit globals, and Healthy Open Source – A walkthrough of the Node.js Foundation’s base contribution policy Tips: Do not abstract/split your (webpack) configs. Copy&amp;Paste can be a good thing. and Learning a completely different programming language (like Haskell) “upgrades” your programmer brain :) Picks: Z.sh - jump around and Watch Kent's videos about webpack (more coming soon), they are awesome! I did learn some cool stuff :)  Sean T. LarkinLinks: You Don’t Know JS An incredible resource by @getify for learning ES6 and Javascript. (Kyle Simpson), I was wrong about TypeScript and here’s why a great read on the immediate and incredible benefits of Typescript. , Google Doc - Shameless self-promote, but really great intro to webpack., and React Webpack Cookbook (now SurviveJS) Tips: When you are struggling on a problem, take two steps back and ask “What am I trying to accomplish. Is this the best avenue for the results.”  and Read the source code!!! Source code is the one true documentation. If you are ever curious about how something works, or what additional features there are, pop in the source code and start reading. Webpack’s source code has lots of hidden and cool features. Picks: Midwest Dev Chat Slack, webpack-closure-compiler awesome alternative to using UglifyJSPlugin. +1 For Typescript Users with Tscikle. , and Webpack starter for those users of Angular, this is a nice full featured repo/boilerplate. Once you understand webpack, this repository is a must clone.   Tobias KoppersLinks: webpack 2 and RollupJS Tips: Explicit dependencies, Try Code Splitting, Try webpack 2, Tips in these slides, webpack &amp; caching, Everything about webpack, Don’t use boilerplates, but read them, webpack examples, Targeted Builds, and helper for building targeted build Picks: Analyse Tool and Rust  Kent C. DoddsLinks: babel-plugin-module-alias and Generators, Boilerplates, and Starter Kits Tips: Follow me and egghead.io to know when my webpack cookbook course comes out. And follow Frontend Masters to know when to register for my webpack workshop!, Migrating an App to ES6 with webpack workshop (video), and Try to find babel plugins to do stuff you need before you use webpack features because babel is more ubiquitous and interops with more tools. Picks: React30 - a new 30 minute podcast by me, Ryan Florence, and Michael Jackson and webpack-validator - validator your webpack config to avoid headaches  Pam SelleTips: As hard as it is to focus on the basics, sometimes they’re super necessary to getting to the fun stuff! Picks: Tree-shaking with webpack 2 and Babel 6About JavaScript Air:JavaScriptAir is the live broadcast podcast all about JavaScript hosted by egghead.io instructor Kent C. Dodds. Please visit the JavaScript Air website (javascriptair.com) to see upcoming and past episodes. Go to suggest.jsair.io to suggest topics and guests for the show. Go to feedback.jsair.io to provide feedback on this and other episodes. Also be sure to follow JavaScript Air on Twitter and Google+ to stay up to date with future episodes. Also, all episodes are on the YouTube channel as well.

<a href="http://javascriptair.com/episodes/2016-06-08" rel="nofollow" target="_blank">webpack: JavaScript bundler</a> with <a href="https://twitter.com/bebraw" rel="nofollow" target="_blank">Juho Vepsäläinen</a>, <a href="https://twitter.com/jhnnns" rel="nofollow" target="_blank">Johannes Ewald</a>, <a href="https://twitter.com/thelarkinn" rel="nofollow" target="_blank">Sean T. Larkin</a>, and <a href="https://twitter.com/undefined" rel="nofollow" target="_blank">Tobias Koppers</a> Description: <a href="http://webpack.github.io/" rel="nofollow" target="_blank">webpack</a> is an amazing bundler for frontend assets. For many people it has completely changed the game for their build pipeline, entirely replacing other build tools and task runners like grunt and gulp. Join us with the webpack creator and core contributors as we talk with the webpack team about this impressive piece of tech.Show sponsors:<ul><li><a href="http://jsair.io/eggheadio" rel="nofollow" target="_blank">Egghead.io</a> - Bite-sized web development video training</li> <li><a href="http://jsair.io/frontendmasters" rel="nofollow" target="_blank">Frontend Masters</a> - Expert front-end training</li> <li><a href="http://jsair.io/trackjs" rel="nofollow" target="_blank">{Track:js}</a> - JavaScript Error Monitoring</li> <li><a href="http://jsair.io/sparkpost" rel="nofollow" target="_blank">SparkPost</a> - Email. We've Got It Down.</li> <li><a href="http://jsair.io/webstorm" rel="nofollow" target="_blank">WebStorm</a> - Smart JavaScript IDE</li> <li><a href="http://jsair.io/trading-technologies" rel="nofollow" target="_blank">Trading Technologies</a> - Building For What's Next</li></ul>Links, Picks, and Tips: <a href="https://twitter.com/bebraw" rel="nofollow" target="_blank">Juho Vepsäläinen</a><ul><li>Links: <a href="https://www.npmjs.com/package/webpack-merge" rel="nofollow" target="_blank">webpack-merge</a> - My merge tool to keep configuration simple (sharing common config!), <a href="https://www.npmjs.org/package/webpack-validator" rel="nofollow" target="_blank">webpack-validator</a> - Validation of webpack configuration against a schema + checks against good practices., and <a href="http://survivejs.com/webpack/introduction/" rel="nofollow" target="_blank">SurviveJS Webpack book</a> - Free book on the topic.</li> <li>Tips: There is always something new to learn (esp. In frontend). and Fundamentals &gt; specifics.</li> <li>Picks: <a href="http://www.webpackbin.com/" rel="nofollow" target="_blank">WebpackBin</a> and <a href="https://github.com/wting/autojump" rel="nofollow" target="_blank">autojump</a> - a faster way to navigate your filesystem</li> </ul> <a href="https://twitter.com/jhnnns" rel="nofollow" target="_blank">Johannes Ewald</a><ul><li>Links: <a href="http://learnyouahaskell.com/" rel="nofollow" target="_blank">LearnYouAHaskell.com</a> – Good resource for learning functional concepts with Haskell., <a href="https://github.com/ampedandwired/html-webpack-plugin" rel="nofollow" target="_blank">html-webpack-plugin</a> – Almost always a good idea when you’re also bundling CSS with webpack., <a href="http://webpack.github.io/docs/list-of-plugins.html#provideplugin" rel="nofollow" target="_blank">ProvidePlugin</a> – Solves many problems introduced by legacy scripts and implicit globals, and <a href="https://medium.com/the-javascript-collection/healthy-open-source-967fa8be7951" rel="nofollow" target="_blank">Healthy Open Source</a> – A walkthrough of the Node.js Foundation’s base contribution policy</li> <li>Tips: Do not abstract/split your (webpack) configs. Copy&amp;Paste can be a good thing. and Learning a completely different programming language (like Haskell) “upgrades” your programmer brain :)</li> <li>Picks: <a href="https://github.com/rupa/z" rel="nofollow" target="_blank">Z.sh</a> - jump around and Watch <a href="https://twitter.com/kentcdodds" rel="nofollow" target="_blank">Kent's</a> <a href="http://kcd.im/egghead-webpack" rel="nofollow" target="_blank">videos about webpack</a> (more coming soon), they are awesome! I did learn some cool stuff :)</li> </ul> <a href="https://twitter.com/thelarkinn" rel="nofollow" target="_blank">Sean T. Larkin</a><ul><li>Links: <a href="https://github.com/getify/You-Dont-Know-JS" rel="nofollow" target="_blank">You Don’t Know JS</a> An incredible resource by @getify for learning ES6 and Javascript. (Kyle Simpson), <a href="https://www.triplet.fi/blog/i-was-wrong-about-typescript-here-is-why/" rel="nofollow" target="_blank">I was wrong about TypeScript and here’s why</a> a great read on the immediate and incredible benefits of Typescript. , <a href="https://docs.google.com/presentation/d/10mIapWjv1pyUQaMv6G8MCdoe9OK2Ey8zz-CLkHuFdRI/e" rel="nofollow" target="_blank">Google Doc</a> - Shameless self-promote, but really great intro to webpack., and <a href="https://github.com/christianalfoni/react-webpack-cookbook" rel="nofollow" target="_blank">React Webpack Cookbook (now SurviveJS)</a></li> <li>Tips: When you are struggling on a problem, take two steps back and ask “What am I trying to accomplish. Is this the best avenue for the results.” and Read the source code!!! Source code is the one true documentation. If you are ever curious about how something works, or what additional features there are, pop in the source code and start reading. Webpack’s source code has lots of hidden and cool features.</li> <li>Picks: <a href="www.midwestdevchat.com" rel="nofollow" target="_blank">Midwest Dev Chat Slack</a>, <a href="https://github.com/roman01la/webpack-closure-compiler" rel="nofollow" target="_blank">webpack-closure-compiler</a> awesome alternative to using UglifyJSPlugin. +1 For Typescript Users with Tscikle. , and <a href="https://github.com/AngularClass/angular2-webpack-starter" rel="nofollow" target="_blank">Webpack starter</a> for those users of Angular, this is a nice full featured repo/boilerplate. Once you understand webpack, this repository is a must clone. </li> </ul> <a href="https://twitter.com/undefined" rel="nofollow" target="_blank">Tobias Koppers</a><ul><li>Links: <a href="https://gist.github.com/sokra/27b24881210b56bbaff7" rel="nofollow" target="_blank">webpack 2</a> and <a href="http://rollupjs.org/" rel="nofollow" target="_blank">RollupJS</a></li> <li>Tips: Explicit dependencies, Try Code Splitting, Try webpack 2, <a href="https://github.com/sokra/slides" rel="nofollow" target="_blank">Tips in these slides</a>, <a href="https://gist.github.com/sokra/ff1b0290282bfa2c037bdb6dcca1a7aa" rel="nofollow" target="_blank">webpack &amp; caching</a>, <a href="http://webpack.github.io/docs/configuration.html" rel="nofollow" target="_blank">Everything about webpack</a>, Don’t use boilerplates, but read them, <a href="https://github.com/webpack/webpack/tree/master/examples" rel="nofollow" target="_blank">webpack examples</a>, Targeted Builds, and <a href="https://www.npmjs.com/package/parallel-webpack" rel="nofollow" target="_blank">helper for building targeted build</a></li> <li>Picks: <a href="http://webpack.github.io/analyse/" rel="nofollow" target="_blank">Analyse Tool</a> and <a href="https://www.rust-lang.org/" rel="nofollow" target="_blank">Rust</a></li> </ul> <a href="https://twitter.com/kentcdodds" rel="nofollow" target="_blank">Kent C. Dodds</a><ul><li>Links: <a href="https://github.com/tleunen/babel-plugin-module-alias" rel="nofollow" target="_blank">babel-plugin-module-alias</a> and <a href="https://www.briefs.fm/3-minutes-with-kent/25" rel="nofollow" target="_blank">Generators, Boilerplates, and Starter Kits</a></li> <li>Tips: Follow <a href="https://twitter.com/kentcdodds" rel="nofollow" target="_blank">me</a> and <a href="https://twitter.com/eggheadio" rel="nofollow" target="_blank">egghead.io</a> to know when my webpack cookbook course comes out. And follow <a href="https://twitter.com/frontendmasters" rel="nofollow" target="_blank">Frontend Masters</a> to know when to register for my webpack workshop!, <a href="https://youtu.be/a96r7Tjf0Ps" rel="nofollow" target="_blank">Migrating an App to ES6 with webpack</a> workshop (video), and Try to find babel plugins to do stuff you need before you use webpack features because babel is more ubiquitous and interops with more tools.</li> <li>Picks: <a href="https://react30.com/" rel="nofollow" target="_blank">React30</a> - a new 30 minute podcast by <a href="https://twitter.com/kentcdodds" rel="nofollow" target="_blank">me</a>, <a href="https://twitter.com/ryanflorence" rel="nofollow" target="_blank">Ryan Florence</a>, and <a href="https://twitter.com/mjackson" rel="nofollow" target="_blank">Michael Jackson</a> and <a href="https://github.com/js-dxtools/webpack-validator" rel="nofollow" target="_blank">webpack-validator</a> - validator your webpack config to avoid headaches</li> </ul> <a href="https://twitter.com/pamasaur" rel="nofollow" target="_blank">Pam Selle</a><ul><li>Tips: As hard as it is to focus on the basics, sometimes they’re super necessary to getting to the fun stuff!</li> <li>Picks: <a href="http://www.2ality.com/2015/12/webpack-tree-shaking.html" rel="nofollow" target="_blank">Tree-shaking with webpack 2 and Babel 6</a></li></ul>About JavaScript Air: <a href="http://javascriptair.com" rel="nofollow" target="_blank">JavaScriptAir</a> is the live broadcast podcast all about JavaScript hosted by <a href="https://egghead.io/instructors/kentcdodds" rel="nofollow" target="_blank">egghead.io instructor</a> <a href="https://twitter.com/kentcdodds" rel="nofollow" target="_blank">Kent C. Dodds</a>. Please visit the JavaScript Air website (<a href="http://javascriptair.com" rel="nofollow" target="_blank">javascriptair.com</a>) to see upcoming and past episodes. Go to <a href="http://suggest.jsair.io" rel="nofollow" target="_blank">suggest.jsair.io</a> to suggest topics and guests for the show. Go to <a href="http://feedback.jsair.io" rel="nofollow" target="_blank">feedback.jsair.io</a> to provide feedback on this and other episodes. Also be sure to follow JavaScript Air on <a href="https://twitter.com/JavaScriptAir" rel="nofollow" target="_blank">Twitter</a> and <a href="https://plus.google.com/105493143005968326308" rel="nofollow" target="_blank">Google+</a> to stay up to date with future episodes. Also, all episodes are on the <a href="http://video.javascriptair.com" rel="nofollow" target="_blank">YouTube</a> channel as well.

026 jsAir - webpack: JavaScript bundler with Juho Vepsäläinen, Johannes Ewald, Sean T. Larkin, and Tobias Koppers