Webpack 5 Full Project Setup

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/preset-env for modern JavaScript transpiling. - CSS, SASS, PostCSS with postcss-preset-env for CSS fallbacks for better cross-browser 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 mini-css-extract-plugin - HTML templates with html-webpack-plugin - Cleaning the output folder every build with clean-webpack-plugin - 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 ❗❗ ### webpack-dev-server update `webpack-dev-server` released version 4 on 2021-08-18, 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 `webpack-dev-server` ^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/dev-server/#devserverstatic And here is a link to the migration guide from v3 to v4: https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md ### 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: https://www.youtube.com/watch?v=t9okUDkRUDc ### 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: https://www.youtube.com/watch?v=lNkVndKCum8 ~~~~~~ 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: https://www.youtube.com/playlist?list=PLmZPx_9ZF_sB4orswXdpThGMX9ii2uP7Z Repository for reference (left alone for historic reference purposes): https://github.com/Jimmydalecleveland/webpack-starters/tree/react-full-project Branch for the latest updates to the previous repo code: https://github.com/Jimmydalecleveland/webpack-starters/tree/react-full-project-latest Follow Jimmy Cleveland's doings: twitter: https://twitter.com/JimmyDCleveland blog: https://blog.jimmydc.com/ #webpack #webpack5 #babel #react #fastrefresh #browserslist #toomanyhastags