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 productionready 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 ALLINONE TOOL for frontend 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: https://bytegrad.com/courses/professi...
Professional CSS Course: https://bytegrad.com/courses/professi...
Email newsletter (React + Next.js course out soon!): https://email.bytegrad.com'>https://email.bytegrad.com

Premium Courses:
Professional JavaScript: https://bytegrad.com/courses/professi...
Professional CSS: https://bytegrad.com/courses/professi...
All courses: https://bytegrad.com/courses

Email newsletter (get notified of new courses): https://email.bytegrad.com'>https://email.bytegrad.com

⏱ Timestamps:
0:00 Intro
0:52 Most common tasks for JSfiles (bundling, minification, transpiling with Babel, tree shaking / dead code elimination, lazy loading)
2:18 Most common tasks for CSSfiles (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 JSfile
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 realworld 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, packagelock.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 (babelloader for JSfiles, later PostCSSloader for CSSfiles)
1:00:16 Babel configuration (babel.config.js)
1:02:00 Transpiling vs Polyfills (corejs)
1:06:36 browserslist for targeting browser support
1:09:44 Webpack for CSSfiles (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 minicssextractplugin, needs cssloader)
1:23:45 Final result
1:27:41 Professional JavaScript Course preview

#webpack #webpack5 #whatiswebpack #webpacktutorial #webpackcrashcourse #webdevelopment #coding #programming