react-typescript-webpack-boilerplate: A TypeScript repository from ai-zubair

About

Minimalistic Webpack-5 build environment for React-v17 and TypeScript-v4.

AsyncRoute HOC for code splitting of route-level React components.
Separate webpack configurations for development and production environments.
Presets system to add/over-ride webpack configurations on the fly.
webpack-dev-server for local hosting in development.

Adding preset configurations to webpack:
1. Write the webpack configuration file for the preset.
2. Name the configuration file as webpack.<preset-name>.js.
3. Add the webpack configuration to build-utils/presets/ directory.
Invoking webpack preset configurations:

Preset configurations are invoked by specifying a presets key on webpack's environment object, in the build command.
```
    build-command -- --env presets=<preset-name>
```
Mutiple presets can be invoked as a comma separated list of preset names. Assuming we've added 3 preset configuration files as:
- webpack.<preset-name-1>.js
- webpack.<preset-name-2>.js
- webpack.<preset-name-3>.js
The configurations can be simultaneously invoked as:
```
  build-command -- --env presets=<preset-name-1>,<preset-name-2>,<preset-name-3>
```
Environment specific configurations:
- Webpack configurations specific to development and production environments can be respectively added to webpack.development.js and webpack.production.js in the build-utils/mode-configs/ directory.
- Environment specific configurations can be invoked with a mode key on webpack's environment object, in the build command.
```
    build-command -- --env mode=<development | production>
```

Build and run the project locally with npm run build:dev