This course has been updated! We now recommend you take the Webpack 4 Fundamentals course.
Transcript from the "Specifying an Entry Point" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Kent C Dodds: So now that we have our output file name, like webpack keeps telling us we need, we're gonna run that script again. And now it says configuration file found, but no entry configured. Okay, so we need an entry now. So let's actually go back to my slides, to talk about why entry matters.
[00:00:24]
>> Kent C Dodds: And then I'll give you a chance to ask a couple questions. So the entry is our main method of our app and it's responsible for requiring all the things that it needs, all of its dependencies. And then webpack will resolve those dependencies and spit out the resulting bundle, or the resulting concatenated resolves, interesting file, into the output that we specify.
[00:00:46] I think most of this will make more sense when you can see what that result looks like. But, yeah, hopefully that's kind of like explanatory of what the purpose of this output and this entry is all about, why we use those those terms. So we'll go ahead and say entry.
[00:01:05] And actually we're going to provide webpack with a bit of context for this entry. So all of our modules are in the source directory, so that's the context for our source files. And so, for our context, context actually needs to be an absolute path, so we're gonna say const resolve = require('path').resolve.
[00:01:33] And if you're on Node 6 then you can do this fun stuff.
>> Kent C Dodds: So then we're gonna use resolve to resolve directly to source. Let me just get rid of that, sorry. So if you are following along, that's hopefully helpful, and our entry inside the source directory, in that context, is this bootstrap.js file.
[00:01:55] So I'll say bootstrap.js
>> Kent C Dodds: Awesome, I'm almost to the point where I'll let you loose on this. Whoops, that needs to be a relative path, sorry.
>> Speaker 2: There's a question, any reason that they're not getting webpack errors in their terminal? A couple of people.
>> Kent C Dodds: Yeah, if you aren't seeing the webpack errors that we were seeing earlier then that's probably a problem.
[00:02:20] This is one of those weird cases, where errors indicate good things [LAUGH]. So yeah if you're not just keep following along, and hopefully magically it works.
>> Speaker 2: [LAUGH]
>> Speaker 3: What was the error supposed to look like again?
>> Kent C Dodds: The errors were the ones that were like, you need to have the output file name.
[00:02:40] And then it says, you need to have an entry configured. And once you resolve those things, you probably won't get this one unless you made the same mistake I did where this wasn't relative. You'll get that one if it was not relative. But once you get it working this is what you should see.
[00:02:55] You'll see the time that it took, you'll see the assets that were created. And the exciting bit is you'll see this new file in your file system that's breaking all your linting errors or linting rules, but it is your bundle. So I'll quickly explain what this bundle is and then I'm gonna stop and let everybody work on it, and I'll be available to answer some questions.
[00:03:24] So the bundle here is a bunch of code that you didn't write, remember our entry is just this file right here. This file has no explicit dependencies, no require statements, or any kind of imports of any kind. And so you might be wondering so what on Earth is all of this code?
[00:03:47] Well, webpack ships with a runtime. So webpack is gonna turn all of your require statements, or your import statements, into what's called a webpack require to resolve all the modules at runtime. And it needs a runtime to accomplish that task, so that's what all of this code is.
[00:04:07] And then finally we get to our little module right here. And it looks exactly as it was, it just said, okay, take that and just plop it in. It will change some things, if it finds import statements and things it'll change those to work with the webpack runtime.
[00:04:27] But other than it's pretty much just our code, we're not transpiling or anything at this point. So one interesting thing about this is, remember, we have it in an immediately invoked function expression. We don't need to do that anymore because it's already in this closure. So already we can get rid of writing some boilerplate code, which is cool.
[00:04:45] We'll do that a little bit later. And, yeah, that's basically the whole idea. Sorry, one other thing that I want to do and then I'll let you loose. Now that we have this bundling we can change this bootstrap.js to bundle.js. And if we run npn start with that change we can refresh this and the app still works, you should see view set in the console and all of your to dos.