How to Build a Standardized Webpack + React + TypeScript Front‑End from Scratch

Introduction

This article explains how to create a standardized front‑end application based on Webpack 5, React 18 and TypeScript from an empty directory.

Background

Although tools like create‑react‑app or Ice can bootstrap a project, building the configuration yourself helps you understand bundling, compilation, plugin architecture and modern front‑end trends such as bundle‑less.

Project Structure

├── dist                // build output
├── .husky
├── webpack.config.js
├── test
└── src
    ├── assets
    ├── components
    ├── constants
    ├── routes
    ├── utils
    ├── pages
    │   └── Home
    ├── App.tsx
    └── typing
├── .editorconfig
├── .eslintrc
├── .prettierrc
├── tsconfig.json
└── package.json

Dependencies

Dependencies: antd, react, react‑dom

DevDependencies: Babel, TypeScript, ESLint, Prettier, various loaders, webpack plugins, etc.

Implementation Process

Project Initialization

mkdir demo
cd demo
git init
npm init -y

React and Babel

tnpm i -S react react-dom
tnpm i -D @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

These Babel packages provide core transformation, environment presets, JSX support and class‑property handling.

Webpack Introduction

tnpm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin

Babel Configuration

{
  "presets": ["@babel/react", "@babel/env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Webpack Basic Configuration

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.tsx',
  output: { path: path.join(__dirname, '/dist'), filename: 'bundle.js' },
  devServer: { port: 8080 },
  module: {
    rules: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' },
      { test: /\.tsx?$/, exclude: /node_modules/, loader: 'ts-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.(less|css)$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      { test: /\.(sass|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.png/, type: 'asset/resource' },
      { test: /\.(csv|tsv)$/i, use: ['csv-loader'] },
      { test: /\.xml$/i, use: ['xml-loader'] }
    ]
  },
  plugins: [new HtmlWebpackPlugin({ template: path.join(__dirname, '/src/index.html') })]
};

TypeScript Configuration

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "Node"
  }
}

Resource Management

Use Webpack asset modules (asset/resource, asset/inline, asset/source) for images, fonts, JSON, CSV and XML files.

CSS, Less, Sass

tnpm i -D less less-loader style-loader css-loader sass sass-loader

Development Environment

Set DEV and DEBUG from process.env, enable source‑maps in development, and use hot module replacement via webpack-dev-server.

Performance Optimization

CleanWebpackPlugin removes previous build files.

Separate production and development configs: production uses contenthash for filenames, development uses hash.

Bundle analyzer, TerserPlugin and OptimizeCSSAssetsPlugin minify JS and CSS.

Code splitting via multiple entry points, splitChunks, and dependOn for shared libraries.

MiniCssExtractPlugin extracts CSS into separate files.

Speed up TypeScript checking with transpileOnly and ForkTsCheckerWebpackPlugin.

EditorConfig, Antd, ESLint, Prettier, Commit Hooks

Create a .editorconfig file to unify formatting, configure Babel to load Ant Design components on demand, set up ESLint with @typescript-eslint and React plugins, use a Prettier configuration for consistent code style, and enforce pre‑commit formatting with Husky and pretty‑quick.

Full Webpack Configuration

// webpack.config.js (full version)
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const ESLintPlugin = require('eslint-webpack-plugin');

const { DEV, DEBUG } = process.env;
process.env.BABEL_ENV = DEV ? 'development' : 'production';
process.env.NODE_ENV = DEV ? 'development' : 'production';

module.exports = {
  entry: './src/index.tsx',
  output: { path: path.join(__dirname, '/dist'), filename: 'bundle.js', clean: true },
  devServer: { port: 8080 },
  mode: DEV ? 'development' : 'production',
  devtool: DEV && 'source-map',
  module: {
    rules: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' },
      { test: /\.tsx?$/, exclude: /node_modules/, loader: 'ts-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', {
          loader: 'less-loader',
          options: {
            lessOptions: {
              modifyVars: { 'primary-color': '#1DA57A', 'border-color-base': '#d9d9d9', 'text-color': '#d9d9d9' },
              javascriptEnabled: true
            }
          }
        }]
      },
      {
        test: /\.(sass|scss)$/,
        use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 2, sourceMap: !!DEV } }, { loader: 'sass-loader', options: { sourceMap: !!DEV } }]
      },
      { test: /\.png/, type: 'asset/resource' },
      { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource' },
      { test: /\.(csv|tsv)$/i, use: ['csv-loader'] },
      { test: /\.xml$/i, use: ['xml-loader'] }
    ]
  },
  optimization: {
    minimizer: [
      new TerserPlugin({ parallel: false, terserOptions: { output: { comments: false } } }),
      new OptimizeCSSAssetsPlugin({})
    ],
    minimize: !DEV,
    splitChunks: { minSize: 500000, cacheGroups: { vendors: false } }
  },
  resolve: { extensions: ['.json', '.js', '.jsx', '.ts', '.tsx', '.less', 'scss'] },
  plugins: [
    new HtmlWebpackPlugin({ template: path.join(__dirname, '/src/index.html'), filename: 'app.html', inject: 'body' }),
    DEBUG && new BundleAnalyzerPlugin(),
    new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[name].css' }),
    new ESLintPlugin(),
    new ForkTsCheckerWebpackPlugin()
  ].filter(Boolean)
};

Conclusion

The article records the entire workflow from project initialization to a complete, standardized front‑end template that integrates code style, development environment, and production optimizations, enabling zero‑cost reuse in future business scenarios.

Recommended Reading

http://mp.weixin.qq.com/s?__biz=MzIzOTU0NTQ0MA==∣=2247509237&idx=1&sn=4d99a5bb722edaa5fd09494268830ea2

http://mp.weixin.qq.com/s?__biz=MzIzOTU0NTQ0MA==∣=2247508588&idx=1&sn=1d011102aeaa8f496a1bab329b8bf0ce

http://mp.weixin.qq.com/s?__biz=MzIzOTU0NTQ0MA==∣=2247509546&idx=1&sn=39acfc274b6e5c81d994f47bfd409f7e