Babel preset for Webpack builds.

To include it into a Babel configuration:

  "presets": ["@dr.pogodin/react-utils/config/babel/webpack"]

To provide additional options (for supported options see documentation for ops argument of getPreset() method below):

  "presets": [
    ["@dr.pogodin/react-utils/config/babel/webpack", {
      "someOption": "someValue"

This preset does the following:

  • Sets up @babel/preset-env, and @babel/preset-react presets which are needed to compile modern JS(X) code.

  • Sets up @dr.pogodin/babel-preset-svgr preset, which allows to import SVG files as React components.

  • Sets up babel-plugin-module-resolver, which helps to resolve module imports relative to /src/shared, and /src folders of host codebase.

  • Sets up @babel/plugin-transform-runtime, which enables the re-use of Babel's injected helper code to save on codesize.

  • Sets up @dr.pogodin/babel-plugin-react-css-modules, which is a part of CSS modules setup that transforms styleName props of React components into globally unique className props. Generated class names are verbose in development and test environments, to faciliate debugging, and they are short 6-symbol-long hashes in production Babel environment, to ensure compact CSS and JS output code.

  • In development environment it also sets up react-refresh/babel.

View Source config/babel/webpack.js, line 1


# static constant ENVIRONMENTS

import { ENVIRONMENTS } from '@dr.pogodin/react-utils/config/babel/webpack';

Supported Babel environments.

Name Type Description
DEV string


PROD string


TEST string


View Source config/babel/webpack.js, line 71


# static getPreset(babel, opsopt) → {object}

import getPreset from '@dr.pogodin/react-utils/config/babel/webpack';

Generates Babel preset for Webpack.

Name Type Attributes Default Description
babel object

Babel compiler.

ops object <optional>

Preset options.

noRR boolean <optional>

If truthy react-refresh/babel plugin is not included into config, no matter the environment.

noStyling boolean <optional>

If truthy all setup related to styling ((S)CSS processing) will be skipped.

targets string | Array.<string> | object <optional>

Targets for @babel/preset-env.

View Source config/babel/webpack.js, line 158

Generated config.