webpack.dev.mjs

import path from "node:path";
import { fileURLToPath } from "node:url";
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
import DirectoryTreePlugin from "directory-tree-webpack-plugin";
import HTMLPlugin from "html-webpack-plugin";
import { merge } from "webpack-merge";
import {
  enhance,
  filter,
  sort,
} from "./src/utilities/content-tree-enhancers.mjs";
import common from "./webpack.common.mjs";

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

export default (env) =>
  merge(common(env), {
    experiments: {
      lazyCompilation: false,
    },
    mode: "development",
    devtool: "source-map",
    entry: {
      index: "./index.jsx",
    },
    plugins: [
      new ReactRefreshWebpackPlugin(),
      new HTMLPlugin({
        template: "index.html",
        favicon: "favicon.ico",
      }),
      new DirectoryTreePlugin({
        dir: "src/content",
        path: "src/_content.json",
        extensions: /\.mdx?/,
        enhance,
        filter,
        sort,
      }),
    ],
    devServer: {
      static: path.resolve(__dirname, "./dist"),
      port: 3000,
      hot: true,
      compress: true,
      historyApiFallback: true,
      open: true,
      client: {
        overlay: {
          warnings: false,
          errors: true,
        },
      },
    },
  });