Webpack 5 Full Course (Babel, PostCSS, npx, Node.js & npm)

Webpack is used to run TASKS.
MOST COMMON TASKS for JavaScript files:
- bundling
- minification
- transpiling and polyfills (Babel)
- tree shaking / dead code elimination
- lazy loading
MOST COMMON TASKS for CSS files:
- bundling
- optimizations like above (minification, vendor prefixes, px to rem -- all with PostCSS)
- CSS Modules
- Sass/SCSS compilation to CSS
MOST COMMON TASKS for all file types:
- add hash to file names (in practice you cache static assets like HTML/CSS/JS files on a CDN, when you change a file you need to 'bust' the old file from the cache which is commonly done by comparing file names -- if the file name has changed (e.g. from main.234asdf.js to main.74545fds.js then the old file will be removed from cache and new is put in -- '234asdf' and '74545fds' are hashes and based on file contents, hash only changes when content of file changed)
The above is for a 'BUILD': creating a production-ready version of your project, but webpack also provides help during development (e.g. with a DEVELOPMENT SERVER & SOME TASKS also need to be run during development like Sass compilation to CSS).
Therefore, it has become an ALL-IN-ONE TOOL for front-end development.
This tutorial will also explain IMPORTANT RELATED CONCEPTS like Node.js, npm, npx, terminal / shell, ES Modules, config files, browserslist, core js (polyfills) and much more -- all crucial for understanding webpack!
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Email newsletter (React + Next.js course out soon!): email.bytegrad.com
💻 Premium Courses:
Professional JavaScript: bytegrad.com/courses/professi...
Professional CSS: bytegrad.com/courses/professi...
All courses: bytegrad.com/courses
🔔 Email newsletter (get notified of new courses): email.bytegrad.com
⏱️ Timestamps:
0:00 - Intro
0:52 - Most common tasks for JS-files (bundling, minification, transpiling with Babel, tree shaking / dead code elimination, lazy loading)
2:18 - Most common tasks for CSS-files (bundling, minification & vendor prefixes with PostCSS, CSS Modules, Sass compilation)
3:04 - Most common tasks for all files
3:19 - Other features besides running tasks (Development server)
3:55 - Crucial concepts for understanding webpack (why multiple files, ES Modules vs CommonJS modules, folder structure)
4:01 - Web Development fundamentals (HTML is starting point, CSS and JS are external resources)
6:58 - Components in 1 JS-file
8:36 - Why we want modularity
9:57 - IIFEs for modularity (oldschool)
11:23 - Multiple files for modularity
12:15 - Folder structure (src, dist, build, components)
14:42 - File for common utilities (constants, helper functions, etc.)
15:50 - Exporting and importing (ES Modules, CommonJS modules)
19:54 - Browsers didn't support ES Modules in past -- had to bundle files into 1 file -- birth of module bundlers like webpack
20:34 - Browsers now support ES Modules natively (type="module")
21:13 - Does that mean webpack is obsolete? No, it gives us many optimizations for all file types (JS, CSS, etc.) in 1 tool
24:43 - Webpack for build process in real-world project
26:23 - npm hosts packages -- webpack is a package
27:41 - Node.js for running JavaScript code
29:22 - Terminal in VS Code (shells are cmd / PowerShell / bash) -- IDE
31:36 - node -v command
32:04 - npm init command (to make project a package -- npm treats everything as a package)
32:57 - package.json file
33:39 - npm install command (to install webpack package)
35:00 - After installing npm package (devDependencies, package-lock.json, node_modules)
37:47 - Webpack configuration (webpack.config.js, mode, entry file, dependency graph, output file)
44:27 - Running webpack (bin path vs npm script vs npx)
49:33 - Supporting older browsers
50:29 - caniuse.com for browser support
52:31 - Transpiling with Babel
58:03 - Loaders (babel-loader for JS-files, later PostCSS-loader for CSS-files)
1:00:16 - Babel configuration (babel.config.js)
1:02:00 - Transpiling vs Polyfills (core-js)
1:06:36 - browserslist for targeting browser support
1:09:44 - Webpack for CSS-files (minification, vendor prefixes, px to rem) with PostCSS
1:12:48 - Import CSS file in JavaScript file? Yes, so webpack can discover this file
1:14:55 - PostCSS configuration (postcss.config.js)
1:18:03 - Extracting CSS into its own final output file (MiniCSSExtractPlugin or mini-css-extract-plugin, needs css-loader)
1:23:45 - Final result
1:27:41 - Professional JavaScript Course preview
#webpack #webpack5 #whatiswebpack #webpacktutorial #webpackcrashcourse #webdevelopment #coding #programming

[@ByteGrad]

Small side note:
Some of the tasks - like compiling Sass/SCSS to CSS -- also need to happen during development (so not only for a production build).

[@theidk9567]

An absolutely amazing explanation. I love your way of comparing before/now and the step by step discovery of the problem - and how to solve it. It's just so nice to listen to. It doesnt even feel like Im studying, it makes me naturally curious.

[@manjunathbm3854]

I watched many other webpack videos but This lecture gave me clear understanding of how webpack works and how to configure properly.. Thanks a lot 😊

[@ByteGrad]

Hi, mastering JavaScript is critical if you want to be a modern, professional developer: www.udemy.com/course/professional-javascript-course/?referralCode=0C1D5752923168BC87C2
Also, if you are a front-end developer then mastering CSS (including Flexbox, CSS Grid, etc.) is equally important: www.udemy.com/course/professional-css/?referralCode=4C3C08E82629E6B15752

[@Tony.Nguyen137]

Dankje bro. Such a great video!! It was so difficult to me to make webpack work.

[@gustavomizrahy6229]

Really helped me. Thanks!! Btw, whats your vscode color theme?

[@ByteGrad]

Great to hear, Gustavo. My theme is Monokai Pro (Octagon)

[@sakesun]

Thanks a million !