Webpack - Having trouble getting my head round it

Even though you've given up for the time being, I feel there needs to be an answer.

Just so you know you can definitely do without Webpack; it is simply added so to bundle your angular app into a couple files. I think the way that Webpack is presented could be confusing to those not familiar with the process or benefits, but let's work around that. To work without it move the scripts back to public, and keep the old script links in the index.html.

One thing to take away from all of this is that Webpack will not only put the code into two files, but also make it compact. I'm sure Huston didn't mean to do this on purpose, but you only need to require Angular once when files are bundled. Why? Because Webpack will take care of the module requirements for you! The only requirement you need to worry about is to make Webpack aware of the rest of the application.

After adding Angular, and adding main.js to the app.js file, we can continue to follow the pattern by chaining the rest of the app together with require statements. Does it really matter in what order? No, Not really. At least in this scenario it does not as long as Webpack has a trail of requires to follow. Here is what you want to add, as well as to what files:

main.js

require('./todo.js');
...

todos.js

require('../directives/todo.js');
...

todo.js

require('../services/data.js');
...

You could have added all of the requires in the app.js, or main.js, but with the chaining method you create a file-trail to all of the files, and allow your IDE to track all of the changes for Git. Since the chain traverses each file and the initial Angular requirement exists, we do not need to add the angular require to each file, Webpack will make sure all of the code has access to Angular after being bundled. Too cool!

As for the folder issue in Git, it looks like you are not the only one. I also had a similar issue after the first section of the course. Per the error it looks like there are already files in existence where you are trying to move the folder. I would commit everything first then manually move the files in the Terminal/CLI. Git will automatically stage the new files (where they moved to), as well as your file deletions (where they came from).

I just started taking this course recently and I ran into problems with Webpack too. I never jumped on the bandwagon. And haven't needed to, though I've dabbled in Angular 2. So far the CLI with Angular 2 has prevented any headaches.

Anyway, that's beside the point. Most of these "Chapters" have different tags you can checkout with the project files. I just went to the next section and used those tags:

git clone https://github.com/treehouse-projects/mean-todo.git
cd mean-todo
git checkout tags/s4v1 -b using-mongodb-with-express-and-mongoose
npm install

It's not a solution as much as it's a workaround. The problem seems to be that webpack has changed enough since these lessons were recorded. I'd just checkout the tags unless you want to learn old Webpack.