you All right so who here has heard about webpack i Hope so that's, why, you're here right okay, so yes my name is shawn Larkin i'm a program manager for microsoft in their, web platform and I work on edge dev tools but aside From that i'm one of the maintainer of web pack i kind of fall in line with the developer advocate kind of role But then i've, also done some work on the angular core team, who here uses angular. Angular. Okay, yes nothing wrong with that There isn't and Just a general kind of evangelist for open-source sustainability a Little bit about, myself, so i'm kind of a former tech support rep Gone rogue i got tired of not being able to solve people's problems And so i look kind of learned to applescript whoever has written an apple script before yeah, like that Was my first programming language and then i did a little bit of objective-c swift Javascript and i do like woodworking chicken farming internet of things So, yes like i said sustainable open-source practices I've been trying to be involved with Encouraging others to be involved with open-source and how can you grow. Your organization how can you grow your community how can you make it rich and thriving so you can find me at the lark in So feel free you know you can take a look, and see Me at any of these places online Yeah, hi, my name is tobias. Copass, and i'm the founder of epic and maintainer and part of the core team and yeah and go, ahead, and yeah currently i'm doing full-time open source, web development and next Yeah, you just tell, me what i'll do it No, it won't work, from this far there we go cool, and my background is a little bit, weird for a. javascript, developer i'm started with c sharp c++ c development and Did javascript as a hobby, and yeah so i came to make But i've never done a real, web application so far Never made a real, web application what Yeah, you, also find me on github and on twitter because sokra i did a w it's cool, why not okay so yes We're, gonna talk about a lot of things today i mean and a lot of it is gonna be about, web pack of course Hold on so on a side note tobias When you wrote, web pack it was for not four years thesis right it was for the web project That your thesis, was for i did a. Web project in my thesis, oh and but it's small one? Okay, and yeah that's i? Need of epic module bandar and it started with a pull request on and to another project yep, make and But it was rejected to prove request so Because it was a complete rewrote of the language and so i published as Another name modules web pack yeah and it was renamed to epic yes So, wasn't even forest thesis project. Just shutting, some light there so yes but we're Gonna, talk about not only, how Web pack works under the hood i'm gonna kind of get so who here has like never actually configured their Web pack before, we love create react app, we love everything that you know We we like being able to write code when, we need to there are, some people out there Who love configuring or you know, have very unique kind of scenarios and that's why, web pack exists so we're Also, going to talk, about just the high level understanding how, web pack works from the user interface and then we're Gonna, talk about how. It works under the hood, and what, we have coming for you for web pack for so Who knows, what a javascript module is? Yeah, okay, cool, yep sure why, do we like them, because they're reusable They're, encapsulated Organized for the most part i mean unless you have like a redux and reactants, like, everything's like spread out everywhere they're, convenient But, what do they look, like well you have common jas If you're, just familiar with it just raise. Your hand when you see the module type that you you've used before common jas yes amd yeah Mg, plus common jas i will, be wow i've never seen, this before until like i made this slide and then We have typescript or equus script module syntax pretty similar pretty similar should i shake the dongle so it there we go? Excellent luckily beyond it and issue a free stage, yeah we're on the issue free stage, yeah, yeah submit an Issue okay, we'll get back to you So how, do they work in the browser Well they don't really or if they do not very, well or not very fast maybe soon and Every library is different like Wouldn't it you know if you go and mpm installer look at. Your package saw. Json Every single library might ship a different format of these modules and It's up to them and this is just javascript that we're talking about It's not even talking, about other things, like, styles assets images png etc. So wouldn't it be nice if it all just worked together seamlessly And sweat pack that, is what wet vac is? so You all know, wet pack is module bundler but i like reinforcing the idea? What does this mean it lets? You, write modules that work in the browser that simple, was that probably the, main premise tobias you'd say, like that was the point This, was a point but, also code splitting, was my intention that's right Code splitting that's right that's right from modules, web make And if you wanted to know About that story check out or read me at the bottom of the readme so Just, gonna, blaze through kind of the since most people understand how, to use it so, we have our config We have a. Cli, which literally uses the node api behind the scenes and Then, we have the node api itself and? So this is the core, concepts i'm just so that you can understand before, we dive under the hood, how It works kind of on top of the hood So, we have our entry point? let's say given you have a module And it relies on you know. Another component and then that component probably relies on a couple more components You know you're importing and requiring them whatever syntax but that one has a dependency it's a common jeaious library let's say and But wait it, also it's like, bootstrap or something else they have, style dependencies in one way or another That is our entry that is the entry point when, we talk about entry and webpack the root of that graph Is what we're referring to and so it is the first Javascript in your project to kick off your application so You can kind of see here when you define your entry point, web pack literally says how, ok let's start at This, this, file will resolve it and then we're. Gonna trace through here and go through, each of these pieces to make sure So we're basically telling What to load for the browser and it works with the output property of course so output, that's another core concept So you can think, about it exactly, what its purpose, is by defining specific Properties like a path and a filename we're telling webpack how, to handle these files So in this case we've created a, bundle output it to a folder and There's way, more properties that you can define an output but, that's the high-level idea it's treatment of the dependency graph when it is created So loaders this is like one of my favorite part, like, good idea loaders were a great idea to us so Not every dependency is gonna just be javascript but, we want to explicitly tie them together so? Loaders allow you to tell, web pack how, to treat non javascript after it's been resolved so Let's say you have a type script file or javascript that doesn't really the syntax doesn't make sense or it's newer Yes it's something that's not supported. By our traditional parser or let's say it's css or style So you can kind of imagine in that same diagram that We use that it is tracing through these dependencies and before we add it to the graph These functional transforms are converting this into a javascript module in some representation And there's all sorts of flexibility behind it we can filter through, them, like, how Many, no commonly you know a good practice or something, we see a lot in the react community Is that you ignore your no modules or exclude them, who has seen that before probably Good share hands yep So lots of different options to filter through and it's incredibly flexible so much that you can even chain it together So let's say if you, have something like less, well The traditional idea or foundation, is that you want to have a Loader that performs one operation so one transform and then you can, chain them together So if you have a, less file, you'll, see here it converts it to a Style dot css Converts it to like an array in memory of the style and that pretty much what it is like an array and then Then, we get this javascript module called inline that style into the browser with, style tags Best way to say it but There's literally a million different options that are out there in our ecosystem and this is my favorite part because a Loader is just a function that takes a source and returns a, new, source it's so easy to create and publish and share And and have this really rich ecosystem that, we have for our project So loaders tell us webpack, how To interpret and translate files especially that aren't javascript and they kind of return compilations they return new sources So plugins who is ever written a custom plugin. Yes like i may be this like first five minutes is too boring for you this, is the anatomy of a plugin so i Like to define it as a class to be as always correct Me and says it's an instance so it's just an object that has an apply method on the prototype chain, and so You can, see here this is the anatomy and so what, we have is that whenever? the whenever this plug-in, is registered webpack will call apply plugins and It will pass an instance of itself into This, plug-in, so that hooks can. Be hooked into and then functionality performed so in this case this is super simple Whenever the compiler is done or it is failed we're literally, going to write a dinging noise to the terminal So now that you kind of understand it looks like a class it kind of has a constructor how Does it operate so when you use it in your configuration You're, passing a, new reference to it and then that way if you have options let's say, some of the more common. Chunks plug-in Let's wiggle it there we go? ship it You can, pass additional arguments options and features To, be a suntech here But did you know that 80% of web pack is made up of its own plug-in system did you know that? yes My, gosh this, was my response when i found this out for the first time the blake screen Huh, oh you can hear that was kind of my mind was like, no way, oh? That was a nice image to be as i like that Okay, no worries no worries so We know that essentially plugins? add Additional functionality to web packs event lifecycle and so it gives you the power to do anything that you ever wanted to and So this kind of takes, me to the next part of this talk which is like the? Main guts, so who's feeling kind of comfortable so far You're, like okay, okay shawn, tell me how it really works how, does it work under the hood so the next part of this talk is We're gonna now completely remember everything that i just told you But don't try, to tie it together with, these concepts so We're, gonna talk about how. Web pack works under the hood as an architecture as a system as a bundler But before we begin we're? Gonna talk about something called kappa, bowl, who here knows, what a, bowl is Ok, cool, somebody's writing, some plugins So tappa, bowl is this 200 line Library 235 i think to be exact not anymore but It is the backbone of the web pack plugins, system the whole architecture is based on this library So, what was sean, what does that even mean so? Tappa, bowl, allows you to mix Mix in with an existing class and then it magically is bestowed these Awesome functions, like apply plugins parallel or apply plugins, async or apply plugins And what that does is these are the events that get emitted that plugins are listening to so Who here is ever used nodes event emitter? Ok, tap a pool is very very similar So you can, see here that there is literally an event and then in this case it's because it's an async event We allow, the plug-in to perform functionality call a callback and we continue? So here's a super, super, basic. Plug-in You, saw it once before of course i like writing them as classes because it makes more sense to me But, we have a constructor, and then the only rule, is that it has to have an apply function or a method or? property on the prototype chain And that way, we had we gain access when, we? Register this plugin to the compiler itself and then, we are going to listen to the event and do something So in the same way, my beautifully drawn slides one we apply and we gain access to the compiler then When webpack runs or when something that uses the system runs it then triggers, these hooks so You, might be like sean, what do you, why? You, keep saying capital instance or you might hear it a Few times all that means is a class or an object that extends tafel or really something that you can. Plug into So, another diagram might be this is very specific to webpack, is that to access the compilation? which is another instance, we have to plug into or tap into the compiler first and Then as you can see here the compilation, also has lots of different plugins that are executing different functionality So we're gonna talk, about what are these seven capital instances so Compiler is the first one it's kind of the i say central dispatch it's kind of like start and stop It really delegates the top-level events that are happening, when webpack runs or finishes and it's exposed. Via the node api and Then, we have the dependency graph so the compilation There we go i kind of call it's like the brain everything, that's super, juicy, about what webpack does happens inside of the compilation It's created, by the compiler and it contains our dependency graph traversal algorithm, that's such a mouthful basically how, we collect and create the dependency graph And then, we have the resolver so who here is ever used or understands what a resolver is? okay So, don't get like scared, by the name all resolver Does is it resolves it finds things it just finishes so let's say for example When you use a shorthand syntax for a path in node the nodes native resolver Gives you the absolute path and verifies it exists So in the same way here with webpack our? Module factory might be given this partial path to let's say an entry point or a An import statement and then the resolver just says, okay, let me go find out. And make sure it works or it exists Then when it's done it actually will return a lot of extra information like What folder was this file in what's the, absolute path what, was the raw. Request etc And as you can see here it is tappa belanzone Bs basically came up with almost every single plug-in that you could think of that you, would need to make this as configurable as possible Okay, so now, we have module factories? So, who here so i know the angular users out. There who's like i know, what a factory is? People know what a factory is all it does is return objects or something and? so in this case, we have a module factory that takes a resolved request, and Then it collects the source for that file now that we know it exists and we know where it is and? It creates a module object out of it wow. Look it's so beautiful and it goes through the factory there and Then, we have the parser? so Who is ever written a parser who knows, what an ast is who's written a babble plug-in Okay, so you all in some way have been exposed to an ast So parser parses it will convert Raw source code into, a tree called an ast that can be easily traversed And so what webpack does is we parse the file and then, we extract all of the dependency statements so requires? Imports etc there we go and then, we create, these things called dependencies or dependency objects So if i was to diagram this We take this module object that we've received, and we pass it through our little glasses? That are parsing and then, we add dependencies to our module? And then, we have the template so who here is used a template before in ui you know in your ui code We all know, what the purpose of a template is it's for binding data to your view? Well in this case for webpack we're just binding data to the source code of the code that we're Going to generate or the modules in this case You can kind of think of it like the configuration is our props The dependency graph is our state and? Our template is like the jsx So it creates code that you see in your bundles So if i was going to diagram this if we look here, we? Have a template for every single kind of abstraction so a Chunk, which is just a container to keep reference to our modules in our graph? That is gonna have a template? Our module has a template in each flavor of these dependencies are gonna have templates i just use like handlebars to describe this And then when we call render out pops, what you see in a, web pack like in a bundled file So let's recap what we've just learned So if we started out with the entry we're, gonna read the entry point that We got from the entry property and it's going to go through and verify That it exists so we're going to the resolver and then once we verified we're gonna get this normal module object and? Web pack is gonna, pass that to the parser and if it's not javascript? that's when, we pass loaders against it And if it is javascript we're, gonna collect dependencies and attach them to that module But, we don't know if those dependencies actually exist and so We have to resolve them and this entire cycle repeats until the graph is complete To, be as check, my work does that sound accurate So, yes that is exactly so now? how does this dependency graph get into the browser so i wrote this comic i drew this comic Hi i'm a module i can't, wait to work in the browser, oh? Cool, your jets, we need to get you into shapers You need, to jump in this thing, we call a Chunk, and we need to keep track of you because you were gonna crap ton of plugins at. You, we don't want to lose track all right almost there but, we have a problem those require statements have to go and But the parser gave us, some special instructions called templates and a factory so that we can, replace them Wow i'm finally ready for browser land look at. This thank you So you just learned how, web pack entirely works under the hood entirely entirely so How, do we feel comfortable about this so far yes kind of okay excellent that's good that's more hands that i've seen before excellent so now That i've kind of talked about everything that you know is to know in terms of our architecture i want to give tobias the opportunity Now to talk about what Are we going to do for web pack 4 so you understand how it works you understand the concepts So what are we going to do to, make, like, how are we going to make this even more powerful yeah, thanks, yeah thank you and Yep but have you changing it because it's a bit bad that we always use strings in the? Long method names and just weird and the most the biggest Problem is its unperformed to use strings and it's not monomorphic and so, we are changing it and to a new, syntax and But it's transparent for the user if you don't only, use their packets you don't see it yes But the new, some text like, this and or? More fake, books and better performance then people can get typings, well yeah yeah yeah you can even get type analysis, why You read a plug-in Quite a plugin you can see all the plug-in, hoops, we have this typing's that somebody really create Hopefully it mean of yes i spent a little bit of time on the plane but it was kind of difficult so yeah okay, okay? We editing a, new, feature which? basically currently We have the one time always in the first, chunk and it's It m2 lot other chunks you have to have the one time in suppose And this is a bit unclear because you can't use i think script x because? Order is important you have to lots of one time first and then the Spirit chunks and so we're changing this to a pattern which is also used by some Other things, which is we create a, okay? And push to the array so it's order and dependent and you can use a singh script x which have a lot of benefits Yes example if you have the main or the vendor. Chunk cached or the comments on cached and Other chunks not then it can, be related, before other things and it's not Help, don't have to wait for the m so it chunks defined before i'm says, how Do you, make html i think you're good examples like i've seen, people try and do multiple commons Chunks, but that can create dependent Chunk, dependencies and sometimes the order can, be not as expected, but, this solves that problem, yeah, okay? yeah so and we also adding very big change is that we allow other module types and javascript so, we want to have native support for Webassembly, example and we also, add with the same pattern and native support for css Because it's currently css is a bit of a. Heck with extract explained extremely really big So you get native css. Support, which means, also that you get and? Separate css, file by default and all the fancy stuff in separate css, files and you, don't know long i have Injected the css. Code into the Script bundle and you don't have to double Pass it so that's better and webassembly school so you'd say so now that you kind of understand how Web pack works under the hood, we can kind of explain what this Means so when you saw our template our module factories our runtime our parser it's all centric around? Javascript, and that's it and so for the work that we're gonna have to do is Put an abstraction layer it's ok, you can go all the way, back there friend, yeah, like even the templates it doesn't matter but essentially what this will do we now can have the opportunity to put an abstraction layer on it and Make x as a first class citizen and so you might see, new Wasum templates ym runtimes a wise em resolver a wizened parser and so We want to be able to provide and create the same opportunities like code splitting Scope poisoning, and everything, that's possible for azzam and javascript and css or even html modules in the future Who's that with this yep Ok, and oh yeah? this
Example for the vaasam stuff is very cool so - you can just import Synchronously import embossing module and repect Take care of the a synchronous compiling and loading of the bottom part it basically hoisted to the next Chunk, loading so if you load a. Chunk, which contains vassal modules it will Launch a chunk in parallel to compiling and annoying the awesome stuff in it yeah so, why, yeah the and i always, ask Why, can't we just use waze i'm rust C++ just like a javascript module and so that was our goal and you know of course, we were awarded a grant for $125,000 by mozilla to implement this work, so we're super excited to get this out to you guys, and we're working with teams like v8 chakra, core To, be able to ensure that these, llvm tool, chains are nice and fast and work really, well with webpack to allow You to do things like this But it's a long, way and yes we probably take a, year to have Good, support for native languages the co-pilot infrastructure need to be adjusted and laura's for west and c++ So it's taken, away, but my pick for we'll start with, basic. Support module yep So and we always seen this in the mainstage and? on us yeah so and you basically get better optimization for Big libraries, which contains many modules like, lodash or Here's example with x so The problem this is pattern and you import, some french a function from lotus But the acma suppt spec says, every side effect in this lodash library must be executed so and Because the other side is a bit wonky It's not the Active i epic isn't sure about is this a side effect or is it just a prototype way a Method to it and it's not used so and With this pattern you currently get big bundles yep because Many, side effects executed and so Epic will introduce a new and package level and flag Which is called side effects falls so we basically opt in to say epic yeah My modules don't have side effects so if you import them and you don't use the exports You can, admit them so and basically pepa classes and if you write something like that it follows we export and Basically rewrite it to own to include only the module which contains the flatten function mm-hmm so that way you know we should see out of the box so we're working with package authors, like lo - and I'm working with teams, who have open, source projects like react fabric ui and microsoft as, well as Rxjs and the angular team to ensure that this can Be something that will be available and possible immediately, when, we release My pack ford so you can, use it We want to ensure that there are huge winds out of the box for you just by updating to web pack for And i believe there's, also probably, going to be a whitelist property - right yeah it's planned Currently it's only supported to have a flat flag for the coil Package, but tip it's plan to have modules specifying something like nice only is this files but not i guess, we Sure and jade jd daltonism is on my team at microsoft and so he's super excited to see this - Yes, also change a bit in the process for the next released Least calidad and a week after that released, sceles and it was unfortunate because They, also complained, about it's too fast now, we can't just keep our can fix our code And so, we give them more time a month between release candidate and released em so Maybe with this release most plugins and loaders are compatible yes yeah absolutely, we We listen to you know anytime that, we try and ship fast you know We we end up hearing from our package authors or dependent authors and so we decide okay Well we'll find out from the ecosystem how We want to release a breaking change and so we typically say two to three months and then we'll give module authors a chance By, having an rc for a. Month so that they can, make sure they can catch up report bugs etc So you should see a benefit for the ecosystem in that when you upgrade to web pack for Even though they're, not my, there may not be that many breaking changes That it you know whatever dependency or if you're writing a package or a Plugin, for it that you can have time to test it before release so Yes, is that the last slide i can't guess so excellent that's Beautiful that's it so yes If you, guys have any questions of course, we can't do q&a now But feel free to stop by either of us and say hi or Anything literally webpack is created, by you so every person here, who came to support us at this stage We thank you so much and so thank you guys It's a chance to answer to give some questions, oh we do have questions awesome one more question yes Okay, so could you please advise how, to dine it oh so i guess if you, do have some questions you can, ask them so how, do you Dynamically include chunks file name if rendering a page via jsx template on server side Do you, want to take their, own yeah you basically need to Take the chasing stats file it's there are, some plugins to write it to a file Epic starts plug-in, also Many, plugins and this file contains all the information about how the structure of the epic panelist and also the chunks file names in Some there's a mapping with, name touch filename and to just read them Wait this file and you get this So hopefully that answers your question wins wins, way back for ready i Mean so, we have tobias always says, when it's done but i think so We still have some things that, we need to finish but, we never give a solid timeline we do promise that, we won't release something? Within two or three months of the previous, major release but if you, want to try it out now That gives you an opportunity to really report bugs, and help us feel good, about, shipping the rc. Faster so if you check out the project on github it's under the next branch right now and so i Tested it you know on the plane and before like the week before And in most of the basic cases it was working pretty, well so yes? you Probably, some beta versions before and so you get the feeling, when it's, near Would you use webpack as a static site generator would you yes i would And why, not there are there are some site generators which use web pick add-ons i don't know. The names Five phenomena gatsby, yeah i know. Knocks jas but that kind of isn't truly static but yeah Can a. Css, file be the entry file It can, be but it's not recommended you basically you shouldn't put the State you shouldn't separate the styling from the javascript stuff you should have an entry point to your application Which is in dependency graph of all your dependency you have a script end styling so you just if you If you, many people just says have an entry for a Yahveh script, and have an entry for styling but this, is kind of an old pattern which? tosca knows but in repick you the idea is to have a complete dependency graph of all styling and script Any early advance for web pack 5, well i mean, we try not to think, about the next version, until we've really been comfortable While shipping what we've set out to for web pack for so i mean So most of the time i mean up until, we started hearing feedback Like guys, don't ship, majors so fast we get scared and so like, okay? So, what we decide is that we'll wait two three months and? What we'll do is any breaking changes that provide performance or any other features will hoist into like We'll just kind of keep it suspended in our github and then those will land into web pack the next, major version whatever it is It's probably, gonna be awesome yes azzam yeah assembly support Very likely that you'll see that in web pack 5 Why is module concatenation disabled by default Yeah it's Inverse an experiment and it's basically in experimental state status and we edit it in depok for Anything, so and we can't? It would be a breaking change to enable it by default and then in a, major version but am i planning maybe to Do, some refactoring with Optimization and separation between production and development stuff in the epic form maybe there's a optimization production optimization the development flag Which you can set and then you get always a good stuff for production and all that stuff Yeah, and when you think, about it like it is a production feature only so like Don't use it on your dev server don't use it with, hmr it's broken with, hmr i'm pretty sure yeah I mean like the point is is that, we can't? Assume that you have a production or developing environment, we can't? Assume anything? That's what makes? Web pack so powerful to use is because you have the ability to make it work for your stack So if we were to put that on by default Everybody's builds, would be inherently slower at the cost you know for us It's easier for us to have a feature that's available for you to opt in and not make any assumptions What best practices should, we follow? For the best code minification, what plugins how, to import etc That's a good question it's, well? yeah Yeah, a neighbor Module kinnickinnic concatenation a neighbor, and he was? bobby with, module spoils he was code splitting and active file compiler Babel preset emv is also really good advice if you are, using babel because It's going to look, and see what it's basically autoprefixer for your javascript and so you? Pass the browsers that you support if you only support one browser then there may be a Likely, chance that you don't have to minify, or i'm, sorry transpile all of the different syntaxes that you're using so Should an external flag dependency, be a peer dependency or a normal one so Like in externals if they're doing like a library package That doesn't care about this Yeah it depends if you A peer dependency is something you Your library in example if you if you have a plug-in or something, like that for other Project and it's a p depends because you? Want to give the user the opportunity to choose the library and you as a plugin for the library or you can specify Which range as possible Dependencies and you basically get always gets the latest version you are in your, veins yeah is it good to use webpack for node and express my opinion, yes absolutely um One of the things that like We haven't gotten enough like intel on is like when you bundle a node app it's sometimes faster because the module resolution in your noggin, be a little slow so Yeah, and so like when you bundle a node app it's kind of faster and you instantly can use Esm syntax so no dot, mjs know. Any of this crazy, stuff you can, literally just bundle a node app and Anybody, here use hot module replacement for their api's or like, yeah it is a really nice feature super nice you can Literally update your code without having to like close out your server restart it you know Check, the api to see if it works it's just instant when you update your code so yeah can you, give us, some webpack, t-shirts i have a huge So i do have a bunch but they're like Extra large and xxl so i but i do have a bunch back in the hotel room so like throughout The, day you can probably find, me and we can get those for you Yeah, is there any plan to start using typescript or flow for web pack it makes easier for more people to contribute so this part is your opinion only That's your opinion only and so you can't really speak for everybody who's a contributor but Is there a plan so it's really hard, there's like a lot of different reasons that, we don't want to I'll let tobias speak to his i think one it's really It is a complete like we'd have to completely change our architecture and we've never ever in webpack had to have a build Step for our library and so there's a lot of benefits like being able to instantly link or allow People to check out from github, and not have to do any builds up or anything like That or shipping a, disk so and i know you have opinions, like, about the code Style that gets transpiled and things yeah and basically it's if you write a code directly you Basically see what the performance is and if you have a translation? Step you maybe sometimes you don't see always this is very expensive to use and for off loop with the transpire to a Complex pattern you can generate assessing functions or something like, that so this Performance could be performance problems you know, don't see it obviously and we don't want to choose one flow or typescript Yeah it's kind of like a that's kind of a controversial decision for us to like, we we believe that both Systems are great but, we also don't, want to make an opinion on them and You know cause an issue in our ecosystem we care more about that then it comes to the structure and typing's and Really once we have this new plug-in system and we have typing's generated for it? You're! gonna
See a lot especially through like vs code a Considerable amount of type support and intellisense while contributing in our project so it should be a much more elevated experience than what it used to be How much work will be required to update from web pack three to four an existing project, not too bad and So far there are no change bacon changes for the user it's only four plug-ins internal changes and so so if you use upgraded to the new, epic force and it should basically just replace the parent sees and i i guess Currently there's, no big changes the configuration maybe we add some chopped tomatoes we'll find something i'm sure like, there's always sneaking changes but we we have a m for two to three, we have an upgrade guide and we Continue this with an upgrade guide for the user which contains all the changes you need With quotes examples and so yep, oh this is a fun one dll plug-in verse comments. Chunk plug-in, would you recommend We picked this one by the way in case you're curious Would you recommend for codes footing in web pack or? It feels like, three. Questions i'm not sure So i mean both of them do completely separate things, so like dll plug-in if you understand how External works it's basically telling webpack, don't try, and resolve this, file just know That when this code is actually in the runtime or in the browser that this Whatever, is set as your external will be available and so a dll plugin just creates a bundle of these externals so you can link Together with another build Yeah, i guess if you do a vendor chunk They, basically do is the same thing but they, have different benefits and Dl packing is faster But you don't get tree shaking or scope hoisting in the deal But with the comments shanklin to basically say common chunk only contains exports and modules we really use in your application so it's tree-shaking its scope posted and So it's smaller so as yeah it's kind of the trade-off so like i always, tell people, use dll plugin in Development mode because you're avoiding work of bundling time so like your builds, we faster but, don't use it in production you can But those are the trade-offs, that he just gave an example for What are the best practices for using webpack for large code bases how, do you improve build, time, so that's one of the things We mentioned so dll plugin is a great example We actually so like we have an entire Like page that i think you even authored it yourself so if you, go to, web pack touch a set org. Slash Guides you're! gonna
See a build time guide and tobias authored it this is one of the things take a look at your resolve property Like now understanding how, resolvers work you essentially add a lot of extra build time by having really eloquent or complex resolve properties i'm sure you can, give advice is expensive one is laura's So it can optimize server solving this, less extensions, like, less motivated to use and the laura you can Optimize for say there's a cache loader and a sweat laura Bubble has a cache directory flag, which caches results and basically caching it's important in the other side and yeah Yeah, and could you explain the difference between loader we just told you the difference Who didn't know that No, that's, okay, so i'll try and simplify it what's the difference between a loader and a plot yeah, we can We can, toss that if you know. If you're still not comfortable come find, me and i'll spend as much time explaining how. It works Why, don't we do this one i like this one can, we can, we choose or do? We have to do the thumbs up i want to talk about roll-up Okay, yeah, what do you think it's great? About roll-up so for me i love it because it's focused when you have constraints you can focus on doing something really Well and so in this case building bundling the library is great using roll-up you can Give your, comments, yeah it's You don't doesn't include Just scope hoist all the modules and if it works with scope rising it's great and For most libraries you can, use it because you have control over the code, and then it's super Minimum and readable output files and web pack it's more about optimized and Non readable output files and includes one time because the comments a chair, staff and other Non, acma script module stuff so it's basically replicates have to Fulfill a broad of age of dependencies and weird formats and so it's it's optimized yeah, and Like i said, like, high level, like when you can focus on something constraint you can do it really Well and so roll up is really good for bundling libraries and we always recommend it? Thanks for webpack can you talk, about the contributor community thank you for using it i mean we would be nothing without you you are the contributor community Something that, we like to say is like? It was a tweet from somebody you said like stop thinking that You're, just buying our product but you're another member of our you know our community and that's, who that's what We think and so thank you i would, say our contributor community has Exploded in the past like three months we've had people from all over the world Who has contributed to webpack here Like, we even have, people here today thank you so much like, we would not be where? We are today yap let's give them a round of applause, like thank you We would be nothing without you? and Like, we also have guides and things on how to contribute different Ways you can Check out our medium publication under contributors guide And we have it you know i've written a two blog post and i should get the other ones out but on how to contribute? And what things to look for cuz, to us it's you take the things that you love to do You, take, what you're good at and how? You, bring value and then that's your purpose for our project and so We want you to work on things that you love it doesn't have to be code it can be documentation can Be tack writing it could Be focusing just on error messages if you love working on error messages we want you to do it it doesn't matter you could have zero years of experience you could have 20 years of experience You could be a c-sharp, developer, who wrote construction ct Machines for a living until he started doing open, source full-time it doesn't matter so Please please please if you're passionate about webpack or you, want to be involved let us know well webpack be open source always sure yes always, be a part of the chase foundation, and the terms with, chase foundation, make sure that, my pegs will always be always Possible for us to make it yep not even possible Let's how, much time are, we we still have time for quests. Oh okay? Well angular. Cli, work instantly with, white pack for ask the cli team i know i'm on it but, i haven't be as involved Likely, yes it should Will webpack for support m script and generated waze and modules out-of-the-box Like i think they're talking about a, wasum library target? Like a, wasum lib target? Or is it talking about like just a pure wasm module i it's about? The difference between between rossum modules and vaasam mateusz, for m's krypton, because i'm scripting, does some web javascript and Basically it has a full linking, step with Step and oh, yeah, okay, put the whole thing in superman vo more more about em separating each Compilation its each c++ File into a russian module and make the dependency graph in bassem and i'm captain basically gives a big big big chunk of Bottom code, which is generated by the whole? Code base so when css, becomes a first class citizen in webpack 4 will webpack dev server ha reload css Files directly instead of a blob url what do you think, case maybe yes So case is actually, also a maintainer of web pack and works on web pack dev server so i pulled, them up Yeah, yeah! You can, make it a yes or no, answer or like, maybe it doesn't matter I think that'd be good i like it yes yes is your answer I'm sorry for pulling you up on the spot but i just want to be want you to be up here Because it's not technically not a perfect, observer by question because so with reloading ones over there how to, do replacement stuff and It's not yes yes exactly So using resolver for paths ide doesn't see them could, we expect to plug-in for it yeah you just learned how. To make a plug-in Okay, so you can reach out to us if you Want advice or ideas or how-to or maybe if your v s code user like myself We would love a resolver language service how. Cool, would that be Do resolve alias to slow, down the build, is there an optimal amount To, use and be fine there isn't i mean don't use as many but i would say What do you think the least slow resolve configuration is alias? only does Stream compare and then it's basically it doesn't introduce extra io Build, so that's a The most performant option you can Use but i guess i was a backhoe pod about somebody made ten thousand alias configurations and it's, oh? my, gosh Yeah, so don't do that that's not even practical Okay, so is what pack for gonna support basic. Stuff for web assembly or are you, going to be adding advanced extra features as, well Yeah, we want to add extra features but and epic for focus on the basic features because, we want to get something out? It's basic rossum support to see how. The crowd reacts, and Yeah, like how, it worried like does it work and how Well does it work is it successful so thank you guys for all these are tough, some really cool, questions those are really cool Like service so awesome thank you guys so much you can find us afterwards you
