ES6 Modules: Rewrite lesson (alongside separate PR for Webpack rewrite)

[MaoShizhong]

Because

The current Webpack lesson is a known pain point in the curriculum journey, primarily due to the sudden increase in complexity and steps of tooling, coupled with how much of the learning is left to external resources. These external resources limit the cohesiveness of teaching material, and can prove troublesome in the learning process when each resource includes a few unnecessary tidbits that can easily throw learners off (such as multiple entry points in the webpack official guides when learning about html-webpack-plugin). They also are frequently aimed at people who may know a little more about bundlers already, or are following a different course/tutorial. Thus, things often feel disjointed with the TOP curriculum.

While improving the Webpack lesson itself is the primary focus, it was also identified that the preceding ES6 modules lesson is fairly coupled with it, as Webpack and bundlers are introduced there instead of the Webpack lesson.

The order of the ES6 modules lesson was also identified as a little odd, and the order and flow could be improved by focusing on ES6 modules as a primary topic straight away, then introducing bundlers and Webpack in their own separate lesson.

General plan:

• Rewrite ES6 modules lesson
• Rewrite Webpack lesson
• Write new "Webpack revisited" lesson to go immediately after "Project: Restaurant Page".
  • Move more advanced but "convenience" topics there, like webpack-merge
  • Extract template repos section from "Linting" and place it here instead
• Tweak Project: Restaurant Page to reference any new material from preceding lesson changes if necessary

This PR

• Rewrites the ES6 modules lesson (latest live preview)

Issue

Closes #26976
Closes #26977

Additional Information

This will be something to merge alongside 3 other PRs:

1. (Webpack: Rewrite lesson with in-house tutorial (alongside ES6 Modules rewrite) #27961)
2. (Webpack: New second lesson after Project Restaurant Page #27962)
3. (Feature: Add new "Revisiting Webpack" lesson to both pathways theodinproject#4522)

Pull Request Requirements

• I have thoroughly read and understand The Odin Project curriculum contributing guide
• The title of this PR follows the location of change: brief description of change format, e.g. Intro to HTML and CSS lesson: Fix link text
• The Because section summarizes the reason for this PR
• The This PR section has a bullet point list describing the changes in this PR
• If this PR addresses an open issue, it is linked in the Issue section
• If any lesson files are included in this PR, they have been previewed with the Markdown preview tool to ensure it is formatted correctly
• If any lesson files are included in this PR, they follow the Layout Style Guide

[MaoShizhong]

Since we're working together on this, I'm tagging you here @advait0603 because I can only select team members in the review request list.

For you and @wise-king-sullyman (since you were also part of the original discussion leading to this work), please do feel free to leave review comments here whenever you have any time to do so. This PR is set as a draft just as the whole work is of course still in process, but reviews are welcome as we go along.

[MaoShizhong]

I've extended the dependency graph bit with some 3-file examples just because I felt having the lesson only deal with 2 files might still leave some questions about what imports where and what an entry point is in more complex projects that will definitely have more than 2 files.

If it's felt this is definitely too much and the 2-file example alone would be significantly better, please let me know.