/react-typescript-webpack-boilerplate

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

Primary LanguageTypeScriptMIT LicenseMIT

About

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

Features

  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.

How to?

  • 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>
      

Get Started

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