webpack.common.mjs

import { createRequire } from "node:module";
import path from "node:path";
import { fileURLToPath } from "node:url";
// eslint-disable-next-line import/no-extraneous-dependencies
import hastscript from "hastscript";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import autolink from "remark-autolink-headings";
import remarkEmoji from "remark-emoji";
import frontmatter from "remark-frontmatter";
import gfm from "remark-gfm";
import refractor from "remark-refractor";
import webpack from "webpack";
import cleanup from "./src/remark-plugins/remark-cleanup-readme/index.mjs";
import aside from "./src/remark-plugins/remark-custom-asides/index.mjs";
import remarkRemoveDuplicateH1 from "./src/remark-plugins/remark-remove-duplicate-h1/index.mjs";
import remarkRemoveHeadingId from "./src/remark-plugins/remark-remove-heading-id/index.mjs";
import remarkResponsiveTable from "./src/remark-plugins/remark-responsive-table/remark-responsive-table.mjs";
import slug from "./src/remark-plugins/remark-slug/index.mjs";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const require = createRequire(import.meta.url);

const mdPlugins = [
  gfm,
  slug,
  remarkResponsiveTable,
  remarkEmoji,
  cleanup,
  [
    aside,
    {
      mapping: {
        "T>": "tip",
        "W>": "warning",
        "?>": "todo",
      },
    },
  ],
  [
    autolink,
    {
      behavior: "append",
      content() {
        return [hastscript("span.header-link")];
      },
    },
  ],
  refractor,
  remarkRemoveHeadingId,
];

export default ({ ssg = false }) => ({
  context: path.resolve(__dirname, "./src"),
  cache: {
    type: "filesystem",
    buildDependencies: {
      config: [__filename],
    },
    cacheDirectory: path.resolve(__dirname, "node_modules/.cache/webpack"),
  },
  resolve: {
    extensions: [".js", ".jsx", ".scss"],
    fallback: {
      path: require.resolve("path-browserify"),
    },
  },
  module: {
    rules: [
      {
        test: /\.mdx$/,
        use: [
          "babel-loader",
          {
            loader: "@mdx-js/loader",
            /** @type {import('@mdx-js/loader').Options} */
            options: {
              remarkPlugins: [
                ...mdPlugins,
                [frontmatter],
                remarkRemoveDuplicateH1,
              ],
              providerImportSource: path.resolve("./src/mdx-components.mjs"),
            },
          },
        ],
      },
      {
        test: [/\.(m|c)?jsx?$/],
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                loadPaths: [path.join("./src/styles/partials")],
              },
            },
          },
        ],
      },
      {
        test: /\.woff2?$/,
        type: "asset/resource",
        generator: {
          filename: "font/[name].[hash][ext][query]",
          emit: ssg !== true,
        },
      },
      {
        test: /\.(jpg|jpeg|png|ico)$/i,
        type: "asset/resource",
        generator: {
          filename: "[name].[hash][ext][query]",
          emit: ssg !== true,
        },
      },
      {
        test: /\.svg$/i,
        type: "asset/resource",
        exclude: [path.resolve(__dirname, "src/styles/icons")],
        generator: {
          filename: "[name].[hash][ext][query]",
          emit: ssg !== true,
        },
      },
      {
        test: /\.svg$/i,
        use: ["@svgr/webpack"],
        include: [path.resolve(__dirname, "src/styles/icons")],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
      experimentalUseImportModule: true,
    }),
    new webpack.DefinePlugin({
      // https://github.com/algolia/algoliasearch-client-javascript/issues/764
      "process.env.RESET_APP_DATA_TIMER": JSON.stringify(""), // fix for algoliasearch
    }),
  ],
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/",
    filename: "[name].bundle.js",
    hashFunction: "xxhash64",
  },
});