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:
webpack.js.org/configuration/...
And here is a link to the migration guide from v3 to v4:
github.com/webpack/webpack-de...
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: F...
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...
~~~~~~
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):
github.com/Jimmydalecleveland...
Branch for the latest updates to the previous repo code:
github.com/Jimmydalecleveland...
Follow Jimmy Cleveland's doings:
twitter: / jimmydcleveland
blog: blog.jimmydc.com/
#webpack #webpack5 #babel #react #fastrefresh #browserslist #toomanyhastags
30 июн 2024
