Creating and Understanding a Basic Webpack 5 Setup

Webpack can be a complicated beast, and I've encountered many developers that will just avoid anything to do with it. But if you take a little time to learn the fundamentals, I assure you that you'll save yourself some time and trouble in the future.

By the end of this video you should understand the minimal parts required to get Webpack working, as well as how to get modern Javascript transpiling and working with a default set of cross-browser support through Babel.

❗❗ 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/...

And here is a link to the migration guide from v3 to v4:
https://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: 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 - Introduction
02:42 - Creating the project
06:54 - Introducing Webpack to bundle our JavaScript
11:12 - Example of minimal output under the hood
14:40 - Babel transpiling through Webpack config file
22:25 - Switching between development and production modes
24:08 - Source maps for debugging
25:26 - Watch mode for rebuilding on save
26:40 - Development server for hot reloading on save
29:30 - Custom entry and output path
32:52 - Dynamically set development or production environment
36:37 - What is still missing with babel-preset-env
40:28 - Wrap-up

~~~~~~

Repository for reference:
https://github.com/Jimmydalecleveland...

Playlist for other Webpack 5 videos:
   • Webpack 5  

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

#webpack #babel