webpack-config-react

webpack-config-react

A bare, modern Webpack 5 config to create a react app without create-react-app. Not battery included!

Note: This package is only for those who are experienced with web bundling, transpilation (eg. @babel/preset-env), optimization, since it comes with no opinionated configuration out of the box. If you are a beginner, it's better to stick with create-react-app or use Next.js.

Features

• Freedom to config CSS, images, svg, etc. (eg. Use the new Asset Modules)
• Support both babel and swc. Allow custom config files.
• Public folder (./public)
• Examples to incrementally add back features like CSS, PostCSS, SASS, Modules or TypeScript.

Installation

npm i --save-dev webpack-config-react webpack webpack-cli webpack-dev-server

Usage

package.json scripts

Add the following scripts to your package.json:

{
  "scripts": {
    "build": "webpack --mode=production",
    "dev": "webpack serve"
  }
}

To serve the built app, you can use sirv-cli:

{
  "scripts": {
    "start": "sirv build"
  }
}

Create React App Deployment article also helps since this config also outputs file to build (by defaults).

webpack.config.js

Create webpack.config.js:

const { createConfig } = require("webpack-config-react");

module.exports = async (env, argv) => {
  const webpackConfig = await createConfig(
    argv.mode === "production" || env.production
  );
  return webpackConfig;
};

To extend webpack-config-react, we can use webpack-merge to merge additional configs into the return value of await createConfig().

npm i --save-dev webpack-merge

See examples for some usages.

Up next, depending on your preferences and requirements, we can either use babel or swc.

With babel

Example

Install dependencies:

npm i --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

Create babel.config.json (or other formats)

{
  "presets": [
    ["@babel/preset-env"],
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

With swc

Example

Install dependencies:

npm i --save-dev @swc/core swc-loader

Create .swcrc:

{
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "jsx": true
    },
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    }
  }
}

Recommended Configs

Aiming to be simple, this does not include configs that are helpful to development. The following shows how to re-enable them.

Source map

source-map-loader

module.exports = async (env, argv) => {
  const isEnvProduction = argv.mode === "production" || env.production;
  const webpackConfig = await createConfig(isEnvProduction);
  return merge(webpackConfig, {
    devtool: isEnvProduction ? "source-map" : "eval-source-map",
    module: {
      rules: [
        {
          test: /\.(js|mjs|jsx|ts|tsx|css)$/,
          exclude: /@babel(?:\/|\\{1,2})runtime/,
          enforce: "pre",
          use: ["source-map-loader"],
        },
      ],
    },
  });
};

Configurations

An options param can passed as the second argument to createConfig.

createConfig(isEnvProduction, options);

• moduleFileExtensions: A list of module file extension to resolve. Default: ["web.mjs","mjs","web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx"].
• pathEntry: Path to entry file. Default: ./src/index.js.
• pathSrc: Path to src directory (will be proccessed by babel-loader/swc-loader). Default: ./src.
• pathHtml: Path to HTML file. Default: ./public/index.html.
• pathBuild: Path to build output directory. Default: ./build.
• pathPublic: Path to "public" folder (will be copied to build directory). Default: ./public.