Webpack: <Webpacks are confusing>

[AngelMsaa]

Checks

• [X] This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• [X] I have thoroughly read and understand The Odin Project Contributing Guide
• [ ] Would you like to work on this issue?

Describe your suggestion

Up until Webpack, it's been a breeze; Yes, I've hit several run-blocks and some stuff has been really confusing, but not at the same level as webpack.

I've tried to look on Reddit, and it seems that other people had have the same issue:

• Post 1
• Post 2
• Post 3
• Post 4

Whilst I understand programming is hard, and I'm probably suffering survivorship bias (I haven't googled stuff that seemed easy to me), this lesson reads as a little bit rushed. It feels like a draw the rest of the owl situation. Without knowing much of the subject (still running through the course), could something be done to make it easier to understand for future users? Eg. Breaking it down into smaller chunks, revisiting how concepts and information are explained, etc.? At the moment it feels like "just copy what we are doing" , which resonates with other people's feedback.

Path

Node / JS

Lesson Url

https://www.theodinproject.com/lessons/javascript-webpack

(Optional) Discord Name

No response

(Optional) Additional Comments

No response

[fedewulff]

I was about to write about this issue but I saw this post. Just wanted to say that I agree with what was being said. NPM and how webpack works is still hard to understand

[EdMagal]

I thought this topic challenging too, but the video in the npm lesson really helped me understand webpack. https://firstclass.actualize.co/p/modern-javascript-explained-for-dinosaurs Once you understand what npm and webpack do, the rest is just learning how to configure the files correctly. I find the webpack documentation does a great job explaining the configuration process. That being said, I don't know how this lesson could be improved. Maybe adding more visual assets? Idk... Do you have a suggestion? :)

[AngelMsaa]

I think the issue lies on the overview for the lesson saying that it will

Explain the purpose of bundlers and how they work.

but the lesson actually not explaining what bundlers are at all. The section that should explain this, called "Bundlers", actually does the following instead:

Mentions that we learned about entry points and dependency graphs It says bundlers use these concepts as well Goes on about some more advanced stuff (Which seems relevant as well)

But it never explains clearly what bundlers are. It might be useful it this part of the lesson:

• Introduced what a bundler is
• Explained what is its purpose
• Provided examples of the problems bundlers solve
• Described how a bundler works at a very high level

[CouchofTomato]

@TheOdinProject/javascript Can someone take a look please

[hoomanhorsey]

I found the section on webpacks confusing as well. I just ploughed through and got through it in the end. While I don't feel like my understanding is particularly good, I feel reasonably confident that picking it up on a revisit should be easier.

I think the section on webpack suffers from the fact that many of the projects we do as we learn aren't really complex enough to warrant the complexity and overhead webpack requires to understand it, for the functionality it offers. But I imagine as projects get more unwieldly and larger, a learner will begin to appreciate the assistance webpack offers. I feel that is one of the inherent challenges with teaching this type of material though. There's are a lot of tools that provide great benefit when projects get more complex, but it's hard to quite understand why you are learning them at the time.

Just as background, I found modules a little over the top at the stage that they were introduced. But now I'm using them extensively without much thought just to keep things a little better organised. I'm assuming webpack will offer the same benefits but I'm certainly not there yet.

[mao-sz]

Thanks all for the input and feedback. The webpack area is notoriously tricky because it naturally has a step up in how many different things you need just to get started with building your app (though after the first Webpack project, you're introduced to convenience tool (template repos) that takes away a lot of setup time - it's just pedagogically better IMHO to do things manually the harder way first before using a convenient shortcut that half does things for you). The individual parts are all not that complex, it's just there are many of them and it's easy to mix things up.

A few things to highlight that I hope will be helpful and provide some further context:

• The ES6 Modules and Webpack lessons were completely rewritten 3 months ago (which also introduced the new npm lesson and Revisiting Webpack lesson), so any older Reddit/Discord conversations regarding the webpack lesson will be referring to the old webpack lesson (old ES6 modules lesson for additional context) which was almost entirely passed off to different external resources.

  These were either riddled with inconsistencies (especially between resources), introduced many unneeded examples without explanation (typically because they were aimed at people who knew about bundlers and just needed to know how webpack did things), and other things that just weren't needed in the lesson/projects and out of scope. The lesson and content order for that area was also improveable, and that's why that entire section was rewritten 3 months ago.

• The webpack lesson does discuss what bundlers are, what they're for, what problems they solve, and a high level overview of how they work via the Introduction and Bundling sections (combining many JS files into fewer (or even just one) to improve web performance when downloading site files, especially when more and more third-party code is used - without a bundler, managing external package code and their updates, and importing them in our JS becomes way more annoying to handle).

  The difficult thing that's the same with any lesson tbh, is that you just won't understand solely from reading. You need practice. That practice will start rocky as you figure out what the hell is going on and reading docs, revisiting resources etc. Eventually you'll get it enough to build your first thing. Your second thing will then be a little easier, perhaps not easy yet, and you'll steadily get more experience and understanding. That's just the nature of all lessons and we can't expect ourselves to fully understand things so quickly. Things do become easier over time and on revisits.

• That being said, even if the lesson does mention the things you've shared about (and I'm hesitant to increase the scope of how far the lesson digs into those topics - far too much of a rabbit hole and not necessary at this point), if the wording of anything etc. is confusing, we would love to hear suggestions on how they could be improved, e.g. what something sounds like it means instead of what it's supposed to mean.

The rewrites have seen a big drop in the community in how many get stuck at that section and in my experience has changed a lot of the questions to ones that are more easily answered (e.g. problems due to doing things differently to the lesson tutorial, missing some setup, doing things in the wrong order etc.), and has gone through various improvements since already. But it's still in its early days and concrete suggestions are so valuable.

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.

[ManonLef]

Most of the functionality is discussed or linked to in the current lesson. If there are more specific issues with sections of the lessons they can be addressed in separate issues