I'm a full-stack developer working with JavaScript and its associated runtimes for the past 7 years. I love to play with code and make something useful out of it! You can find me on social media, I'm quite active there :)

Mehul Mohan

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

Introduction

What is Webpack

Webpack vs Grunt

Webpack Hello World on zero configuration

Config introduction

Webpack mode

Multiple entry points and basic usage

fileName

path

Available placeholders

publicPath

library and libraryTarget

Webpack dev server

devServer writeToDisk

Hot reloading

Intro to plugins

Setting up cool plugins with webpack

Adding a loader

Intro to project

Setting up project dependencies

Writing loader configuration

Setting up tsconfig.json

Hello World with custom configuration

Creating a simple calculator project

Adding hot module replacement to it

Aliases in webpack

Creating production build

Final words

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.

Webpack 4 - First Steps

Webpack 4 - First Steps

Goals

Description

Plan Zero

Plan 1337