Adding Webpack

Explore the process of manually setting up Webpack for a React and TypeScript project. Understand how to install required Webpack packages, configure loaders for TypeScript and React code, set up the development server, and integrate type checking with ForkTsCheckerWebpackPlugin. This lesson equips you to bundle and serve your app effectively while ensuring type safety during development.

We'll cover the following...

Installing Webpack
Installing Webpack Babel and ESLint plugins
Installing a Webpack plugin to create the HTML file.
Enabling a TypeScript based Webpack configuration
Configuring Webpack
Adding type checking into the Webpack process
Wrap up

Installing Webpack

Webpack is a popular tool that we can use to bundle all our JavaScript code into the bundle.js file that our index.html is expecting. Let’s install the core webpack library as well as its command-line interface:

npm install --save-dev webpack webpack-cli

TypeScript types are included in the webpack package, so we don’t need to install them separately.

Webpack has a web server that we will use during development. Let’s install this:

npm install --save-dev webpack-dev-server @types/webpack-dev-server

TypeScript types aren’t included in the webpack-dev-server package, which is why we installed the @types/webpack-dev-server package.

Why do you think we installed these Webpack dependencies as development dependencies?

1.Why TypeScript?

2.Using basic types

3.Creating types

4.Working with generic types

5.Creating strongly-typed function component props

6.Creating strongly-typed function component state

7.Creating strongly-typed class components

8.Creating strongly-typed component events and event handlers

9.Creating strongly-typed context

10.Creating strongly-typed refs

11.Creating React projects with TypeScript using Create React App

12.Creating a React and TypeScript project manually

13.Putting everything together

Adding Webpack

Installing Webpack

Installing Webpack Babel and ESLint plugins #