Webpack 4 - First Steps

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

4.9

(14 ratings)

250 students enrolled

Excellent Rating

Course Instructor: Mehul Mohan

Course image for Webpack 4 - First Steps

Includes Certificate of Completion

Add this credential to your LinkedIn profile, resume, or CV. You can share it on social media and in your performance review.

What's in the course?

29 video lectures
GPT-4 level AI assistance

Course Outcomes

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

Course Structure

30 lectures • 1h 52m total duration

Introduction

1min

What is Webpack

2min

Webpack vs Grunt

2min

Webpack Hello World on zero configuration

4min

Config introduction

1min

Webpack mode

2min

Multiple entry points and basic usage

2min

fileName

2min

path

2min

Available placeholders

4min

publicPath

4min

library and libraryTarget

5min

Webpack dev server

5min

devServer writeToDisk

3min

Hot reloading

5min

Intro to plugins

1min

Setting up cool plugins with webpack

9min

Introduction

3min

Adding a loader

5min

Intro to project

0min

Setting up project dependencies

3min

Writing loader configuration

4min

Setting up tsconfig.json

1min

Hello World with custom configuration

8min

Creating a simple calculator project

1min

Adding hot module replacement to it

3min

Aliases in webpack

5min

Creating production build

5min

Final words

1min

About This Course

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.

Used by learners at

This course is interactive

Interactive courses include hands-on coding exercises to practice as you learn. You practice exercises in a VS Code like IDE without any installation/setup.