.eslintrc.json

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es2021": true
  },
  "extends": ["airbnb-base", "prettier"],
  "overrides": [{
    "files": ["**/*.test.js"],
    "env": {
      "jest": true // now **/*.test.js files' env has both es6 *and* jest
    },
    // Can't extend in overrides: https://github.com/eslint/eslint/issues/8813
    // "extends": ["plugin:jest/recommended"]
    "plugins": ["jest"],
    "rules": {
      "jest/no-disabled-tests": "warn",
      "jest/no-focused-tests": "error",
      "jest/no-identical-title": "error",
      "jest/prefer-to-have-length": "warn",
      "jest/valid-expect": "error"
    }
  }],
  "parserOptions": {
    "ecmaVersion": "latest"
  },
 
  "rules": {
    "no-console": "off",
    "linebreak-style": 0
  }
}

babel.config.js

module.exports = api => {
  api.cache(true);

  return {
    presets: ["@babel/preset-env", "@babel/preset-react"],
    plugins: [
      "@babel/plugin-transform-runtime",
      ["@babel/plugin-proposal-class-properties", { loose: true }],
    ],
    env: {
      testing: {
        presets: [
          [ "@babel/preset-env", { targets: { node: "current" }}],
        ],
      },
    },
  };
};

index.js

import "./style.css";

const x = 10;
function add(n) {
  return n + x;
}

export default add;

index.test.js

import add from "./index";

test("adding", () => {
  expect(add(10)).toBe(20);
});

tailwind.config.js

module.exports = {
  content: ["./*/*.html", "./*/*.js"],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    clean: true,
    assetModuleFilename: "[name][ext]",
  },
  devServer: {
    static: {
      directory: path.resolve(__dirname, "dist"),
    },
    port: 3000,
    open: true,
    hot: true,
    compress: true,
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        include: path.resolve(__dirname, "src"),
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [["@babel/preset-env", { targets: "defaults" }]],
          },
        },
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      template: "src/template.html",
      filename: "index.html", // relative to root of the application
    }),
  ],
};