WebPack 4 + React with TypeScript

This guide shows how to setup WebPack with the React “create-react-app” using TypeScript and Hot Reloading.

Setup a blank React project

Create the blank React app. After this step is completed, you’ll have a Typescript React app running in developer mode on port 3000.

npx create-react-app my-app --template typescript
cd my-app
npm start

Move to WebPack

Begin with installing the needed tools

npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin @types/webpack @types/webpack-dev-server

npm start

Replace the “start” command in package.json:

"start": "webpack serve --config webpack.dev.config.ts"

Modify tsconfig.json

Open tsconfig.json and remove this line:

"module": "esnext"

:!: Unless you do this, you will end up with “cannot use import statement outside a module”!

Modify index.html

In the public folder, open index.html. It uses %PUBLIC_URL% syntax which this guide doesn’t handle. Remove all occurrences (three places). Example href="%PUBLIC_URL%/logo192.png" becomes href="logo192.png" .

webpack.dev.config.ts

In the root, create webpack.dev.config.ts with the following content:

import path from "path";
import webpack from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
const config: webpack.Configuration = {
  mode: "development",
  output: {
    publicPath: "/"
  },
  entry: "./src/index.tsx",
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/i,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-react",
              "@babel/preset-typescript",
            ],
          },
        },
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$/,
        loader: 'file-loader?name=[name].[ext]'
      }
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devtool: "inline-source-map",
  devServer: {
    contentBase: path.join(__dirname, "build"),
    historyApiFallback: true,
    port: 3000,
    open: true,
    hot: true,
  },
};
export default config;

Webpack plugins

Webpack doesn’t do anything unless you explicit add support for the specified function. So, there are no support for html, css or typescript per default. All has to be added, one by one.

Note, in the webpack config file there’s a section called “Rules”. If a processed file matches (eg “logo.svg”), the reflecting plugin will be executed.

# Typescript 
npm install --save-dev typescript ts-node
# css
npm install --save-dev css-loader style-loader
# Common files (.svg, .ico, .jp, ...)
npm install --save-dev file-loader

No need to install Babel? It’s already installed by other tools (Babel is also required to transpile from the written code to a compatible javascript version).

Now it’s finally time to run the solution:

npm start

Webpack is pretty verbose, but wait for the webbrowser to open (and the message “Compiled successfully” in the terminal).

Add TypeChecking

npm install --save-dev fork-ts-checker-webpack-plugin

Edit webpack.dev.config.ts:

# Add this at the top of the file:
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
# Add this in the "plugins" section:
new ForkTsCheckerWebpackPlugin(),

Add ESLint

To add ESLint, do the following (and, of course, add your “.eslintrc.json” file)

npm install --save-dev eslint-webpack-plugin 

Edit webpack.dev.config.ts and add this in the “plugins” section:

# Add this at the top of the file:
import ESLintPlugin from "eslint-webpack-plugin";
# Add this in the "plugins" section:
new ESLintPlugin({extensions: ["js", "jsx", "ts", "tsx"]}),

More information?

Please look at Carl Rippons article, I learned a lot from it. https://www.carlrippon.com/creating-react-app-with-typescript-eslint-with-webpack5/

Enjoy

:)