A Yarn Workspaces + Webpack + TypeScript + Preact Starter Kit 🔰

This is a simple starter kit for those who want to use TypeScript with Yarn Workspaces and Webpack.

The starter kit is also also configured to use Preact.

Pre-requisites

• Node.js 10.15.0
• Yarn 1.13.0

Environment variables

• NODE_ENV eg. production
• PORT eg. 8080

Scripts

For development:

• cd ./packages/package-app
• yarn start

For production:

• cd ./packages/package-app
• yarn build

TypeScript loaders

There are a number of TypeScript loaders available for Webpack, such as ts-loader, and awesome-typescript-loader.

However, Babel now supports TypeScript through @babel/preset-typescript, so you can simply use babel-loader with @babel/preset-typescript and you're good to go!

Compilation speeds are also faster due to only using babel-loader.

Dynamic imports are also supported out of the box using @babel/plugin-syntax-dynamic-import.

What's in the box

• Yarn Workspaces
• Webpack
• TypeScript
• Babel
• PostCSS
• Preact

JavaScript

• babel-loader
• @babel/preset-env
• @babel/preset-typescript
• @babel/plugin-syntax-dynamic-import
• @babel/polyfill
• terser-webpack-plugin

CSS

• style-loader
• css-loader
• postcss-loader
• poscess-preset-env
• mini-css-extract-plugin
• optimize-css-assets-webpack-plugin

HTML

• html-webpack-plugin

References

• TypeScript and Babel 7