webpack.ssg.mjs

// Import External Dependencies
import fs from "node:fs";
import path from "node:path";
import { TransformStream } from "node:stream/web";
import CopyWebpackPlugin from "copy-webpack-plugin";
import RedirectWebpackPlugin from "redirect-webpack-plugin";
import SSGPlugin from "static-site-generator-webpack-plugin";

import { merge } from "webpack-merge";
import WebpackPwaManifest from "webpack-pwa-manifest";
import flattenContentTree from "./src/utilities/flatten-content-tree.mjs";

// Load Common Configuration
import common from "./webpack.common.mjs";

const contentTree = JSON.parse(fs.readFileSync("./src/_content.json", "utf8"));

// content tree to path array
const paths = [...flattenContentTree(contentTree), "/app-shell", "/404.html"];

export default (env) =>
  merge(common(env), {
    name: "ssg",
    mode: "production",
    target: "node",
    module: {
      parser: {
        javascript: {
          url: "relative",
        },
      },
    },
    entry: {
      index: "./server.jsx",
    },
    output: {
      filename: ".server/[name].[contenthash].js",
      libraryTarget: "umd",
    },
    // 서버 번들은 페이지만 렌더링하며, 여기서 내보내는 스타일시트는 참조되지
    // 않으므로 이곳에서 최소화할 대상이 없습니다.
    optimization: {
      minimize: false,
    },
    plugins: [
      new SSGPlugin({
        globals: {
          window: {
            __ssgrun: true,
          },
          TextEncoder,
          TextDecoder,
          TransformStream,
        },
        paths,
        locals: {
          content: contentTree,
        },
      }),
      new RedirectWebpackPlugin({
        redirects: {
          support: "/contribute/",
          "writers-guide": "/contribute/writers-guide/",
          "get-started": "/guides/getting-started/",
          "get-started/install-webpack": "/guides/installation/",
          "get-started/why-webpack": "/guides/why-webpack/",
          pluginsapi: "/api/plugins/",
          "pluginsapi/compiler": "/api/compiler-hooks/",
          "pluginsapi/template": "/api/template/",
          "api/passing-a-config": "/configuration/configuration-types/",
          "api/plugins/compiler": "/api/compiler-hooks/",
          "api/plugins/compilation": "/api/compilation/",
          "api/plugins/module-factories": "/api/module-methods/",
          "api/plugins/parser": "/api/parser/",
          "api/plugins/tapable": "/api/tapable/",
          "api/plugins/template": "/api/template/",
          "api/plugins/resolver": "/api/resolver/",
          development: "/contribute/",
          "development/plugin-patterns": "/contribute/plugin-patterns/",
          "development/release-process": "/contribute/release-process/",
          "development/how-to-write-a-loader": "/contribute/writing-a-loader/",
          "development/how-to-write-a-plugin": "/contribute/writing-a-plugin/",
          "guides/code-splitting-import": "/guides/code-splitting/",
          "guides/code-splitting-require": "/guides/code-splitting/",
          "guides/code-splitting-async": "/guides/code-splitting/",
          "guides/code-splitting-css": "/guides/code-splitting/",
          "guides/code-splitting-libraries": "/guides/code-splitting/",
          "guides/why-webpack": "/comparison/",
          "guides/scaffolding": "/api/cli/#init",
          "guides/production-build": "/guides/production/",
          migrating: "/migrate/3/",
          "plugins/no-emit-on-errors-plugin":
            "/configuration/optimization/#optimizationemitonerrors",
          "plugins/html-webpack-plugin": "/guides/native-html/",
          "plugins/mini-css-extract-plugin": "/guides/native-css/",
          "loaders/css-loader": "/guides/native-css/",
          "loaders/style-loader": "/guides/native-css/",
          "loaders/html-loader": "/guides/native-html/",
          "loaders/expose-loader": "/guides/shimming/",
          "loaders/imports-loader": "/guides/shimming/#granular-shimming",
          "loaders/exports-loader": "/guides/shimming/#global-exports",
          "loaders/remark-loader":
            "https://github.com/webpack/webpack/tree/main/examples/markdown",
          "plugins/copy-webpack-plugin": "/configuration/output/#outputcopy",
          "plugins/terser-webpack-plugin": "/plugins/minimizer-webpack-plugin/",
          "plugins/css-minimizer-webpack-plugin":
            "/plugins/minimizer-webpack-plugin/",
          "plugins/html-minimizer-webpack-plugin":
            "/plugins/minimizer-webpack-plugin/",
          "plugins/json-minimizer-webpack-plugin":
            "/plugins/minimizer-webpack-plugin/",
          "plugins/image-minimizer-webpack-plugin":
            "/plugins/minimizer-webpack-plugin/",
          "plugins/compression-webpack-plugin":
            "/plugins/minimizer-webpack-plugin/#compressing-with-minifying-and-without",
          "plugins/eslint-webpack-plugin":
            "/plugins/diagnostics-webpack-plugin/",
          "plugins/stylelint-webpack-plugin":
            "/plugins/diagnostics-webpack-plugin/",
          "concepts/mode": "/configuration/mode",
          "contribute/writing-a-scaffold": "/api/cli/#init",
          "loaders/raw-loader": "https://v4.webpack.js.org/loaders/raw-loader",
          "loaders/url-loader": "https://v4.webpack.js.org/loaders/url-loader",
          "loaders/file-loader":
            "https://v4.webpack.js.org/loaders/file-loader",
          "loaders/null-loader":
            "https://v4.webpack.js.org/loaders/null-loader/",
          "loaders/mocha-loader":
            "https://v4.webpack.js.org/loaders/mocha-loader/",
          "loaders/istanbul-instrumenter-loader":
            "https://v4.webpack.js.org/loaders/istanbul-instrumenter-loader/",
          "loaders/worker-loader/":
            "https://v4.webpack.js.org/loaders/worker-loader/",
        },
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: "./assets/icon-square-small-slack.png",
            to: "./assets/",
          },
          {
            from: "./assets/icon-square-big.svg",
            to: "./assets/",
          },
          {
            from: "./assets/supporters-*.png",
            to: "./",
          },
          {
            from: "./assets/robots.txt",
            to: "./",
          },
          {
            from: "./googlef7893965f8fb4e95.html",
            to: "./",
          },
          // "CNAME",
          // {
          //   from: ".well-known/atproto-did",
          //   to: ".well-known/",
          // },
        ],
      }),
      new WebpackPwaManifest({
        name: "webpack Documentation",
        // eslint-disable-next-line camelcase
        short_name: "webpack",
        description: "webpack documentation web application",
        // eslint-disable-next-line camelcase
        background_color: "#2b3a42",
        // eslint-disable-next-line camelcase
        theme_color: "#2b3a42",
        display: "minimal-ui",
        inject: false,
        fingerprints: false,
        ios: true,
        scope: "/",
        // eslint-disable-next-line camelcase
        start_url: "/",
        orientation: "omit",
        icons: [
          {
            src: path.resolve("src/assets/icon-pwa-512x512.png"),
            sizes: [72, 96, 128, 144, 150, 192, 384, 512],
          },
          {
            src: path.resolve("src/assets/icon-pwa-512x512.png"),
            sizes: [120, 152, 167, 180],
            ios: true,
          },
        ],
      }),
    ],
  });