Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JS Webpack: Add webpack lesson content #26381

Merged

Conversation

MaoShizhong
Copy link
Contributor

Because

Adds content to the Webpack lesson to introduce how webpack actually works with loaders/plugins/rules and also why they might be needed.

The current lesson does not provide much detail and dives straight into the webpack official tutorials which in my honest opinion, both leave a lot to be desired and also have very often left people in the discord server mightily confused over what things are, what they're for and why they're even needed (especially with how complicated it all looks vs the simple html/css/js they had been doing until then).

The tutorials don't explain the "why" very much, and also demonstrate some practices like serving a dev server from dist instead of src, and not showing how to use html-webpack-plugin with templates. This has led to a lot of people having problems either caused by incorrect/inappropriate usage of things (e.g. multiple entry points when not needed and combined with circular dependencies), and/or had their lives vastly improved when they discover how to actually use something more appropriately.

The proposed content and changes seek to provide a better intro to these concepts and tools, particularly in a way that would benefit the rest of the course's projects more directly.

This PR

  • Add main lesson content (bundling/html-webpack-plugin sections)
  • Wording tweaks
  • Add more appropriate resource for html-webpack-plugin to the assignment section
  • Add useful notes about the resources in the assignment section

Issue

Closes #26214

Additional Information

@ManonLef and @Baguirre03 both expressed an interest in helping with improving the lesson content here.

Pull Request Requirements

  • I have thoroughly read and understand The Odin Project 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

Covers general bundling, loaders and HtmlWebpackPlugin.
Adjusts assignment links with new resource and NBs.
@github-actions github-actions bot added the Content: JavaScript Involves the JavaScript course label Sep 25, 2023
@01zulfi 01zulfi requested review from a team and bycdiaz and removed request for a team September 25, 2023 17:24
Copy link
Member

@bycdiaz bycdiaz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a couple of comments that would attention but this looks great overall!

javascript/organizing_your_javascript_code/webpack.md Outdated Show resolved Hide resolved
javascript/organizing_your_javascript_code/webpack.md Outdated Show resolved Hide resolved
javascript/organizing_your_javascript_code/webpack.md Outdated Show resolved Hide resolved
Adjust existing and add new knowledge checks based
on new lesson content.
@MaoShizhong
Copy link
Contributor Author

Dev/prod mode differences and concerns when webpack warns that a mode
has not been explicitly set are common questions raised in the discord
server.

Whilst optional and just quality of life, I believe this to be a very
simple setup by following the instructions which can make dev/prod
workflow much smoother and more logical.

Copy link
Member

@bycdiaz bycdiaz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This all looks great!

@bycdiaz bycdiaz merged commit c3ffab8 into TheOdinProject:main Oct 16, 2023
1 check passed
@MaoShizhong MaoShizhong deleted the feature/add-wepack-lesson-content branch October 16, 2023 01:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content: JavaScript Involves the JavaScript course
Projects
None yet
Development

Successfully merging this pull request may close these issues.

JS Webpack: Further improvement on Webpack tutorials/intro
2 participants