Скачать с ютуб Creating and Understanding a Basic Webpack 5 Setup в хорошем качестве

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