We are going for the big haul on this one. We'll start out creating a new Webpack 5 project, putting it on Github, and adding all the parts we need as we go. By the end we'll have a Single Page App (SPA) setup that is hosted with some basic continuous integration (CI) so that every time we push, or make a pull request, to the main branch our site automatically updates.

We'll be covering a ton of common functionalities needed in a Webpack project such as:
Babel and @babel/presetenv for modern JavaScript transpiling.
CSS, SASS, PostCSS with postcsspresetenv for CSS fallbacks for better crossbrowser support.
Browserslist config for customizing the browsers you want to support for JS and CSS, all in one place.
Outputting all CSS to a file with minicssextractplugin
HTML templates with htmlwebpackplugin
Cleaning the output folder every build with cleanwebpackplugin
React with the new automatic importing functionality supported in React 17+ through Babel.
React Fast Refresh in Webpack: the new hot module loading tool supported by the React team.
Outputting or bundling images with the new Webpack 5 Asset Module type.
Quickly getting your app/site hosted on Netlify.

By the end of the video you'll be familiar with setting up plugins and loaders of varying types so that you can use this project as a starter for each project, as well as knowing how to modify it for your projects needs.

❗❗ IMPORTANT UPDATES ❗❗
webpackdevserver update
`webpackdevserver` released version 4 on 20210818, which has a breaking change for this video. In the `webpack.config.js` file, under `devServer`, the `contentBase` property has been changed to `static`. If you use `contentBase`, like I do in the video, you'll get an error. You can either use `webpackdevserver` ^3.11.0 (which is what this video uses) and just follow along with the video, or you can install the latest and update to the required change.

Here is the link to the webpack docs for this property:
https://webpack.js.org/configuration/...

And here is a link to the migration guide from v3 to v4:
https://github.com/webpack/webpackde...

WINDOWS USERS
Some of the scripts I make to set environment variables will not work on Windows. I've made a video to fix that issue here:
   • Windows development: Fixing the "NODE...  

Hot Reloading issues
Your issue might be different, but just in case If you are having troubles with hot reloading check out this video, also in the Webpack playlist on my channel, which shows a fix:
   • Solution for Webpack 5 Dev Server Not...  

~~~~~~

00:00:00 What we'll cover in the video
00:02:39 Setting up the project and repo
00:14:13 Babel
00:17:49 Source Maps
00:22:12 CSS, SASS, PostCSS, HMR
00:38:12 browserslist
00:47:46 React with JSX
01:00:17 Images
01:19:42 Automated cleaning and html template
01:31:59 Hosting on Netlify
01:35:04 React Fast Refesh
01:57:35 Wrap up

~~~~~~

Webpack 5 playlist:
   • Webpack 5  

Repository for reference (left alone for historic reference purposes):
https://github.com/Jimmydalecleveland...

Branch for the latest updates to the previous repo code:
https://github.com/Jimmydalecleveland...

Follow Jimmy Cleveland's doings:
twitter:   / jimmydcleveland  
blog: https://blog.jimmydc.com/

#webpack #webpack5 #babel #react #fastrefresh #browserslist #toomanyhastags