How to build your project with Webpack 5 in 2021.

Almost every year, I get into a situation when I need to set up a new javascript project. Projects with a modern framework like Angular already configured for us. But what about more simple apps or widgets, which should be framework agnostic? Usually, we need to have: a liver-reload, TypeScript, CSS-preprocessor, a framework for unit testing, and linter. This guide will be about building a production-ready starter kit, which will satisfy all our requirements.

I’m going to use: Webpack 5, Jest, SCSS, and ESLint. You can scroll to the end to see the the seed project link, or read step by step, to know how to set it up from scratch.

Init project

First thing first, we need to create an npm project, but if you wish, you can use yarn instead.

npm init -y

Rename the project and provide more details in package.json if you need.

Create an src folder and index.ts file in it. This file will be our entry point for our app.

Webpack

Now we need to install the core tool for the building process — Webpack 5 (it’s the latest version on writing day).

npm install webpack webpack-cli --save-dev

To be more production-ready, we will create multiple webpack configs, one for development, another one for building production artifacts.

#nodejs #javascript #webpack