Webpack 1 & 2 - The Complete Guide
4.7 (66 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
388 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Webpack 1 & 2 - The Complete Guide to your Wishlist.

Add to Wishlist

Webpack 1 & 2 - The Complete Guide

Master Webpack Once and For All
4.7 (66 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
388 students enrolled
Created by Nelson Djalo
Last updated 7/2017
English
Current price: $10 Original price: $40 Discount: 75% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 6.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand all the concepts about Webpack
  • Know key differences between Webpack 1 and Webpack 2
  • Understand how web browsers cache content
  • Know how to use long term caching
  • How to use css inside of Javascript
  • Use ESLint in their projects
  • Break web apps into multiple entry points
  • Use React with Webpack
  • Use Angular with Webpack
  • Learn the importance of SourceMaps and how to use them
  • Create optimized production builds
  • Minify Javascript and CSS
  • Embed images using DataURI
  • Use YAML as config files
  • Learn about the fastest package manager called YARN developed at Facebook
  • Deploying Static content with Surge
  • Use Webpack 1
  • Use Webpack 2
  • Use SASS
  • Use CoffeeScript
  • Use TypeScript
View Curriculum
Requirements
  • The basics of Javascript
Description

Webpack by far the best and greatest tool for front end development. It is a module bundler suitable for both large or small single-page web applications. 

In this course you will fully understand and master all the aspects you need to know about this awesome tool. You will learn all the different configuration options allowing you customise Webpack to work the way you want for your own projects.

This is the most detailed course on Webpack ever created. You will learn both Webpack 1 and 2, so that you understand the key differences between the versions. 

The topics you will are:

  • Running a Webpack build
  • Setting up loaders and presets
  • Configuring webpack-dev-server
  • CSS, SASS & Bootstrap
  • Adding entry points
  • Bundling vendor files
  • Production Builds
  • Long term caching
  • Deployment
Who is the target audience?
  • This course is for students who know nothing about webpack.
  • This course is for students who want to better architect their web applications.
  • This course if for students who want to master webpack
  • This course is for students who wish to use languages other than javascript in their projects. i.e. typescript, CoffeeScript & ES6
  • This course for students who want to use ReactJS for their next web application.
Compare to Other Webpack Courses
Curriculum For This Course
80 Lectures
06:24:13
+
Welcome
2 Lectures 02:32

Welcome to this course

Preview 01:09

Overview of what we are going to develop
01:23
+
Lets Understand Webpack
4 Lectures 08:54

Why we need a tool such as Webpack ?

Why
03:28

What is Webpack

What is Webpack
03:17

What is modular approach

Preview 01:23

How modules are added to dependency graph

Webpack Dependecy Graph
00:46
+
YARN Facebook Dependency Manager
2 Lectures 05:05

What YARN is and what it does

Preview 01:31

Set up environment by installing NodeJS and YARN

Enviroment set up with YARN and NodeJS
03:34
+
Webpack the Basics
6 Lectures 25:42

Run first Webpack command

Preview 07:38

Export and require modules

Exports and Require own Modules
04:09

Download jQuery with YARN and use it

Third Party Libaries
03:22

Configure Webpack through config file

webpack.config.js
07:18

Exercise

Exersise
00:49

Exersise Solution
02:26
+
Webpack Loaders
11 Lectures 01:01:03
Lets Understand Loaders
05:00


ES6
06:24

Query Object
02:30


React JS
09:56

React Preset
04:10

Exercise i
04:21

Exercise i Solution
08:00

Exercise

Exercise ii
01:05

Solution

Exercise ii Solution
06:32
+
Webpack Dev Server
2 Lectures 13:14

Setting up Webpack Dev Server
10:20
+
Webpack & CSS
6 Lectures 37:22

Lets use CSS
09:19

Webpack & SASS
07:54


5 - Exersise with Fontawesome
02:48

Exercise with Fontawesome Solution
02:06
+
Resolve
6 Lectures 23:24

How to remove file extensions
04:24

Alias
08:42

index.js "Special File Name"
04:25

Exercise
01:04

Solution

Exercise Solution
02:18
+
url loader, file loader & images
2 Lectures 16:39

Understand File and URL loader

Understanding File and URL Loader
05:44

Use File and URL loader to load inlined images

Real example
10:55
+
Code Splitting
10 Lectures 56:28

Why we need to code splitting

Why Code Splitting
03:01

How to set up multiple entry points

Preview 01:18

How to set up multiple entry points

Multiple Entry Points Part 2
07:07

CSS code splitting

CSS Code Splitting
03:32

CSS Code Splitting PART 2
07:30

How to better organise web applications folder structure

Let's organise app folder structure
10:59

Extra vendor code to separate .js file

Vendor Code Splitting (Commons Chunk Plugin)
06:14

How to use the provide plugin to expose a module with different names

Provide Plugin
01:39

Exercise
02:15

Exercise Solution
12:53
6 More Sections
About the Instructor
Nelson Djalo
4.6 Average rating
696 Reviews
12,494 Students
4 Courses
Software Engineer

Hi my name is Nelson and I am a software developer for a startup. I graduated in London with a 1st class honours in Computer Science and in the past few years I have programmed in various programming languages such as PHP, Python, Ruby, C#. In my day to day job I am a Java and JavaScript developer and primarily write large scale web applications using AngularJS. In my spare time, I love teaching, Photography, Baking, Football and Sewing, Yes I am an all-rounder! :)