Typescript Webpack 5 Boilerplate

A starter frontend boilerplate built with:

• TypeScript
• Babel (7)
• Webpack (5)

This also uses lint-staged for running pre-commit checks.

Features

• Support for both TypeScript and JavaScript as needed.
• May be extended to be used with React, Vue.js, or Angular.
• Webpack Dev Server plugin for local development.
• Minification of TypeScript/JavaScript and CSS/SCSS processed files.
• Support for both CSS and SCSS as needed.
• Assets optimization.
• Webpack Bundle Analyzer for visualising script output and usage.

Prerequisites

• NodeJS
• Npm

Folder structure

src
└── styles
│    ├── _global.scss
│    └── _variables.scss
│    └── index.scss
├── index.ts
public
├── assets
├── favicon.ico
└── index.html

• src
  • The entry typescript file is index.ts.
  • The helpers/set-message folder is a sample folder for how to test using Jest.
  • Local files are imported using the '@' alias. See index.ts file for example.
• scr/css
  • Add your styles here and @import them to the entry styles.css file.
• public
  • Edit the index.html in the public folder to suite your needs.
  • Replace the favicon.ico with your own icon.
• public/assets.
  • Add your assets, to the assets folder.

Configuration

You may change the configuration for Webpack within the webpack folder.

Setup

Install dependencies

Run:

  npm install

Development

Server

Run:

  npm run start

This will create a server at http://localhost:8080/ or at the port number specified in the webpack/configuration/config.js file.

Automatically reloads after each file change.

Production build

Run:

  npm run build

Will output all build files into the dist folder.

Testing (Jest)

Run:

  yarn test

or watch files

  yarn test:watch

Linting

All files

Run:

  yarn lint:all

To fix all possible errors automatically run:

  yarn lint:all:fix

TypeScript (tsc)

Run:

  yarn lint:check-types

There is no automatic fix option for TypeScript.

TypeScript and JavaScript (ESLint)

Run:

  yarn lint:scripts

To fix all possible errors automatically run:

  yarn lint:scripts:fix

Styles (StyleLint)

Run:

  yarn lint:styles

To fix all possible errors automatically run:

  yarn lint:styles:fix

Check bundle size

Run:

  yarn check-size

This will create a server at http://localhost:8888/ or at the port number specified using the -p or --port option via the cli.

License

MIT