Webpack for Beginners

Name: Webpack for Beginners
Rating: 2.5 (1 reviews)

Become an expert in Webpack with this project-focused tutorial with no prior experience!

Created byEduonix Learning Solutions

Last updated 12/2019

English

English [Auto],

What you'll learn

Master the basics of Webpack
Learn Webpack and its plugins from scratch
Learn to use Webpack in production

Course content

6 sections • 45 lectures • 9h 48m total length

Introduction17:00
Javascript Modules Part 112:19
Javascript Modules Part 29:11
Explore CommonJS, AMD, and es6 modules, including module.exports and require, contrast synchronous server loading with asynchronous browser loading, and learn how UMD supports both patterns.
JavaScript Bundling and Loading Part 113:41
JavaScript Bundling and Loading Part 29:14
Explore es6 module bundling and the switch from commonjs to es6 imports, including static analysis and tree shaking. See how transpilers and polyfills enable browser-ready bundles with dead code elimination.

Introduction6:53
Basics Part 117:55
Basics Part 27:08
ES614:08
Trace the past and future of ES6 modules and no-js modules, compare CJS and ES modules, and see how Webpack facilitates modular JavaScript across browsers and Node.js.
Minification14:16
Scope16:04
Hoisting Itself12:30
Explore hoisting and scope hoisting in JavaScript, including var declarations inside functions, function declarations versus expressions, and how webpack bundles and optimizes production code.
Conclusion8:02

Introdcution15:28
JavaScript Engines Part 115:33
Explore how JavaScript engines parse source into an abstract syntax tree, perform lexical and syntactic analyses, and compile to byte code, highlighting lazy parsing and startup performance.
JavaScript Engines Part 213:56
JavaScript Engines Part 318:48
Discover how javascript engines optimize webpack startups through precise pre parsing, scope info, and lazy compilation of inter functions; explore iifes, pipis, and profile guided optimization with jit.
Optimize-JS12:07
Learn to install and integrate optimize-js with webpack to speed initial script execution and measure performance with user timing marks, measures, and Maki across browsers.
Prepack16:17
Code Generation8:28
Conclusion14:47

Introduction8:03
Explore webpack optimization in this introduction, covering html webpack plugin and html webpack magnifier, csx extract plugin, critical rendering path, and performance metrics like Google page speed index and lighthouse.
HTML16:05
HTML Minification Part 111:15
HTML Minification Part 212:56
Explore advanced html minification techniques in webpack for beginners, including collapsing boolean attributes, removing quotes and redundant attributes, optional tags, empty elements, and short doctype, with cautions.
CSS Webpack16:36
learn how webpack processes css with loaders and plugins, separating css into its own file to avoid flash of unstyled content, and master entry points and configurations like the mini-css-extract-plugin.
CSS Optimization Part 115:53
CSS Optimization Part 211:04
CSS Tools13:04
Conclusion10:11
Explore how webpack optimizes front-end assets with HTML, JSX, and template plugins, analyzes the critical rendering path, and uses PageSpeed Insights and Lighthouse to boost performance.

Introduction15:06
Explore Webpack basics in this introduction: loaders, plugins, optimizations, and tooling, including source maps, development server, production config, and testing with Jest.
Loaders14:40
Plugins14:03
Learn how webpack plugins extend the build process by tapping into compiler and compilation hooks. Use tap methods like tap, tap async, and tap promise to customize the build process.
Webpack in Action - Part 114:42
Webpack in Action - Part 213:35
explains how source maps map transpiled code to original sources in webpack, explores dev tool options, and demonstrates using the dev server for live reloading.
Webpack in Action - Part 313:36
Webpack in Action - Part 413:30
Conclusion15:25
Master Webpack loaders and plugins, including asynchronous loading, query parameters, and testing; optimize for production with dev server, source maps, and bundle analysis.

Requirements

Basic knolwedge of JavaScript is required to complete the course

Description

Master Webpack: Build, Bundle, and Optimize Modern JavaScript Applications

Webpack is one of the most powerful and widely used module bundlers for modern JavaScript development. As an open-source tool, it enables developers to bundle JavaScript modules while also processing assets such as CSS, HTML, images, and fonts through its extensive plugin and loader ecosystem.

By organizing your code into reusable modules, Webpack automatically analyzes your application's dependency graph and compiles everything into optimized bundles for faster, more efficient web applications. Whether you're building a small project or a large-scale front-end application, Webpack helps improve performance, streamline development, and simplify deployment.

Why Learn Webpack?

Build scalable and maintainable front-end applications.
Optimize JavaScript, CSS, and other assets for better performance.
Eliminate unused code and reduce bundle size.
Implement code splitting and lazy loading with ease.
Gain complete control over your build process.
Improve production performance and deployment reliability.

Why Take This Course?

Whether you're new to Webpack or looking to strengthen your front-end development skills, this course provides a practical, beginner-friendly introduction to one of the industry's most essential build tools. You'll learn not only how Webpack works but also why it's a critical part of modern JavaScript development.

Through easy-to-follow lessons and real-world examples, you'll understand module bundling, dependency management, asset optimization, and production-ready workflows. By the end of the course, you'll have the confidence to configure and use Webpack effectively in your own projects.

What You'll Learn

Webpack fundamentals and modern JavaScript modules
JavaScript bundling, loading, and dependency management
Why Webpack matters and how it compares with other build tools
JavaScript optimization techniques, including ES6, minification, scope, hoisting, and code generation
Advanced optimization using JavaScript engines, Optimize-js, and Prepack
HTML and CSS optimization, asset processing, and production best practices
Webpack tips, configuration techniques, and essential workflows

Take the next step in your front-end development journey and master Webpack with practical, hands-on learning. Enroll today and start building faster, smarter, and more optimized web applications.

Who this course is for:

Anyone who wants to learn and use it in production can benefit from this course

Webpack for Beginners

What you'll learn

Explore related topics

Course content

Webpack Course Overview5 lectures • 1hr 1min

Webpack Itself7 lectures • 1hr 25min

Javascript Optimizations Part A8 lectures • 1hr 37min

Javascript Optimizations Part B8 lectures • 1hr 55min

Other Optimizations9 lectures • 1hr 55min

Webpack Odds & Ends8 lectures • 1hr 55min

Requirements

Description

Who this course is for: