codedamn logo
codedamn
Course image for Webpack 4 - First Steps

Webpack 4 - First Steps

Use Webpack to bundle and automate a lot of regular JavaScript workflow task and become a powerful JS developer!

1 hours+ of total content
5.0
6 ratings
134 students enrolled
Course Creator: Team codedamn

Hang on...

 

Goals

  • Introduction to Webpack
  • Various webpack options provided
  • Configuring webpack from scratch
  • Creating production ready apps with webpack
  • Adding custom loaders and plugins

Description

Webpack is a module bundler which is much more than just a bundler. It allows you to automate a lot of moving pieces of your project (like prefixing CSS styles, optimizing bundles, writing in TypeScript and Sass and compiling down to browser version, etc.)

In this complete series, we're going to get hands on experience with Webpack and how to start working on real projects using Webpack as the technology.

Once configured, webpack gives you to ability to truly focus only on the code quality you write and leave rest of the optimization and code work on it. However it is important to configure it correctly and know at every moment which configuration does what. In this whole series, we're going on a joy ride with webpack.

Course Structure

30 lectures 01:52:59 total duration

  Introduction (Watch video)
01:36
  What is Webpack (Watch video)
02:12
  Webpack vs Grunt (Watch video)
02:28
  Webpack Hello World on zero configuration 
04:37
  Config introduction 
01:36
  Webpack mode 
02:31
  Multiple entry points and basic usage 
02:47
  fileName 
02:31
  path 
02:31
  Available placeholders 
04:38
  publicPath 
04:36
  library and libraryTarget 
05:00
  Webpack dev server 
05:37
  devServer writeToDisk 
03:47
  Hot reloading 
05:27
  Intro to plugins 
01:17
  Setting up cool plugins with webpack 
09:15
  Introduction 
03:18
  Adding a loader 
05:35
  Intro to project 
00:50
  Setting up project dependencies 
03:56
  Writing loader configuration 
04:51
  Setting up tsconfig.json 
01:39
  Hello World with custom configuration 
08:26
  Creating a simple calculator project 
01:28
  Adding hot module replacement to it 
03:38
  Aliases in webpack 
05:12
  Creating production build 
05:16
  Final words 
01:24
  Test Lab 
05:00

Student feedback

5.0
Course Rating

100%

0%

0%

0%

0%

Reviews

profile pic for jack do
Apr 24, 2022
this awesome
profile pic for Aditya Santra
Apr 23, 2022
very helpful
profile pic for Syed Rahman
Mar 18, 2022
Great course !!!
profile pic for Kevin K.
Feb 19, 2022
The course covers Webpack in detail.

Your Course Instructor

Course Instructor Image

Team codedamn

Official courses from codedamn team

Hi! We're team codedamn - and we are developers, creators, designers building the best interactive programming courses on the planet. Sign up for a free account on codedamn to stay in touch.

Upgrade to codedamn Pro Plan and unlock more courses for accelerated learning. Unlimited courses, interactive learning and more.

Free

  • HD video content
  • Certificate of completion
  • Mentorship from codedamn staff
  • Support over WhatsApp
  • Full learning path unlocked
  • Unlimited hands-on practice

Pro

  • HD video content
  • Certificate of completion
  • Mentorship from codedamn staff
  • All exclusive courses unlocked
  • Unlimited hands-on practice
Try codedamn Pro (14-day free refund)