ai-zubair/react-typescript-webpack-boilerplate

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

1. AsyncRoute HOC for code splitting of route-level React components.

2. Separate webpack configurations for development and production environments.

3. Presets system to add/over-ride webpack configurations on the fly.

4. 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