Webpack setup for Typescript and TailwindCSS

I started to learn TypeScript by building a simple frontend project but it was challenging from the very beginning when I setup the development environment.

The reasons are, first of all, I didn't have prior knowledge in bundling, Webpack, and any other build tools. Plus, it was hard to find right tutorials or resources for TypeScript frontend projects (without React) that actually work.

After several days of research and experiement, I understand how Webpack works and how to setup development environment for TypeScript frontend projects. I write down this article to help people just like me who ...

1. wants to build a typescript project with TypeScript (No React).
2. wants to know about basics of how Webpack works.
3. wants to learn about development environment setup for TypeScript frontend project.

1. What is Webpack and how does it work?

Webpack is a module bundler. Its main job is to bundle JavaScript files to use in a browser. Also, Webpack transforms front-end assets such as HTML, CSS, and images if loaders are included.

Final directory and file structure

myApp/
├─ dist/
│ ├─ index.html
│ ├─ bundle.js
├─ src/
│ ├─ index.html
│ ├─ index.ts
│ ├─ styles.css
├─ node_modules/
├─ package-lock.json
├─ package.json
├─ postcss.config.js
├─ tailwindcss.config.js
├─ tsconfig.json
├─ webpack.config.js

Packages

The following packages are needed for our project.

loaders, plugins in Webpack

1. Initialize the project

Create a directory with the name of myApp and got to the project directory.

mkdir myApp
cd myApp

With the following command line, create a package.json.

npm init -y

2. Setup to bundle .ts files.

2-1. Install necessary packages to bundle TypeScript.

npm install webpack webpack-cli typescript ts-loader -D

You will see that node_modules is created and ts-loader, typescript, webpack, and webpack-cli are now in the devDependencies property in package.json

2-2. Create /src/index.ts

Create both src directory and index.ts in the project folder.

myApp/
├─ src/
│ ├─ index.ts
├─ node_modules/
├─ package-lock.json
├─ package.json

2-3. Create webpack.config.js and setup

2-4. Create tsconfig.json and setup

2-5. Add npm script: start and buildin

2-6. Start to build to test out