webpack.config.js

const webpack = require("webpack");
const path = require("path");
const fs = require("fs");
const yaml = require("yaml");


const TAILWINDCSS_INPUT_DIR =
process.env.npm_package_config_tailwindcss_inputDir;
const REACT_PAGES_DIR = process.env.npm_package_config_webpack_reactPagesDir;
const JEKYLL_SOURCE_DIR = process.env.npm_package_config_jekyll_source;
const JEKYLL_CONFIG_FNAME =
process.env.npm_package_config_jekyll_webpackConfigFilename;
const OUTPUT_DIR = process.env.npm_package_config_webpack_outputDir;

const reactPageSources = REACT_PAGES_DIR.split(",").map((dir) => path.resolve(__dirname, dir.trim()));
const stylesheetsDirpath = path.resolve(__dirname, TAILWINDCSS_INPUT_DIR);
const outputDirpath = path.resolve(__dirname, OUTPUT_DIR);
const jekyllConfigFilepath = path.resolve(__dirname, JEKYLL_CONFIG_FNAME);


const entryFiles = {};

reactPageSources.forEach((dir) => {
  const absReactDir = path.resolve(__dirname, dir);
  if (!fs.existsSync(absReactDir)) return;

  fs.readdirSync(absReactDir).forEach((file) => {
    if (file.endsWith(".jsx")) {
      const name = path.parse(file).name; // Use the file name (without extension) as the entry name
      entryFiles[name] = path.resolve(__dirname, absReactDir, file);
    }
  });
});

const cssFilenames = fs
  .readdirSync(stylesheetsDirpath)
  .map((file) => path.parse(file).base);

// The production site (fiqci.fi) is any deploy that is neither the dev repo
// nor a local build. Only it gets the canonical fiqci.fi url and a generated
// sitemap; the dev site (dev.fiqci.fi) is noindex, so a sitemap there would be
// undesirable. Driven by the build environment, so the same merged code
// behaves correctly in both repos.
const buildingRepo = process.env.GITHUB_REPOSITORY || "";
const isProductionSite = buildingRepo !== "" && buildingRepo !== "FiQCI/dev";

const jekyllConfig = {
  source: JEKYLL_SOURCE_DIR,
  destination: OUTPUT_DIR,
  keep_files: Object.entries(entryFiles)
    .map(([fname, _]) => `${fname}.js`)
    .concat(cssFilenames)
    .concat(["vendors.js", "runtime.js", "common.js", "lunr.js"]),
  // Surface the Matomo host (same MATOMO_URL env the DefinePlugin injects into
  // the JS bundle) to Jekyll so head.html can emit a <link rel="preconnect">.
  // Empty in local dev where MATOMO_URL is unset, so no preconnect is rendered.
  matomo_url: process.env.MATOMO_URL || "",
  // "owner/repo" of the building repository, set automatically by GitHub
  // Actions. This is FiQCI/dev (deployed to dev.fiqci.fi) here and the
  // production repo (deployed to fiqci.fi) after changes are merged over.
  // head.html gates a noindex on this so only the dev site is kept out of
  // search engines. Empty in local dev.
  github_repository: process.env.GITHUB_REPOSITORY || "",
  // Canonical origin used by the `absolute_url` filter (og:url, og:image) and
  // by jekyll-sitemap. Per-repo so each deploy emits its own domain.
  url: isProductionSite ? "https://fiqci.fi" : "https://dev.fiqci.fi",
  // Only the production site generates sitemap.xml. Leaving the dev/local
  // plugins list empty keeps jekyll-sitemap inert there even though the gem is
  // installed. This overrides (does not merge with) any `plugins` in
  // _config.yml, which currently defines none.
  plugins: isProductionSite ? ["jekyll-sitemap"] : [],
}
fs.writeFileSync(jekyllConfigFilepath, yaml.stringify(jekyllConfig));


module.exports = {
  mode: process.env.NODE_ENV || "production",
  entry: entryFiles,
  devtool: 'source-map',
  output: {
    filename: "[name].js",
    chunkFilename: "[name].js",
    path: outputDirpath,
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.jsx/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader", // For Tailwind and other PostCSS plugins
        ],
      },
    ],
  },
  optimization: {
    runtimeChunk: { name: "runtime" },
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendors: {
          // Everything in node_modules goes into the shared vendors bundle,
          // EXCEPT lunr. lunr is only reached via a dynamic import() in
          // SiteSearch, so excluding it here lets it stay in its own async
          // chunk (lunr.js) that is fetched only when a search runs, instead
          // of being hoisted into vendors.js on every page.
          test: /[\\/]node_modules[\\/](?!lunr[\\/])/,
          name: "vendors",
          chunks: "all",
        },
        common: {
          name: "common",
          minChunks: 2,
          chunks: "all",
        },
      },
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        MATOMO_URL: process.env.MATOMO_URL
          ? "'" + process.env.MATOMO_URL + "'"
          : undefined,
        MATOMO_TAG_MANAGER_CONTAINER: process.env.MATOMO_TAG_MANAGER_CONTAINER
          ? "'" + process.env.MATOMO_TAG_MANAGER_CONTAINER + "'"
          : undefined
      }
    })
  ]
};