webpack.config.js

const path = require("path");
const webpack = require("webpack");
const WorkboxPlugin = require("workbox-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const packageJson = require("./package.json");

const appName = packageJson.displayName;
const issues = packageJson.bugs.url;

if (!appName || !issues) {
  throw new Error(
    "displayName and bugs.url must be populated in package.json for use in the privacy policy.",
  );
}

// Define app name as an env var for use by the sendAnalyticsCF function
const definePlugin = new webpack.DefinePlugin({
  "process.env.APP_NAME": JSON.stringify(packageJson.name),
});

module.exports = (env, argv) => {
  if (argv.mode === "development") {
    console.log("RUNNING IN DEV MODE. Service worker will not generate.");
  } else {
    console.log("RUNNING IN NON-DEV MODE. Service worker will generate.");
  }

  const htmlPlugin = new HtmlWebpackPlugin({
    // Need to use template because need 'root' div for react injection. templateContent doesn't play nice with title, so just use a template file instead.
    template: "./src/index.html",
  });

  const privacyHtmlPlugin = new HtmlWebpackPlugin({
    filename: "privacy.html",
    template: require.resolve(
      "@skedwards88/shared-components/src/components/privacy.template.html",
    ),
    inject: false,
    templateParameters: {
      appName,
      issues,
    },
  });

  const copyPlugin = new CopyPlugin({
    patterns: [
      {from: "./src/images/favicons/favicon.svg", to: "./assets/favicon.svg"},
      {from: "./src/images/favicons/favicon.ico", to: "./assets/favicon.ico"},
      {from: "./src/images/favicons/icon_192.png", to: "./assets/icon_192.png"},
      {from: "./src/images/favicons/icon_512.png", to: "./assets/icon_512.png"},
      {
        from: "./src/images/favicons/maskable_icon_192.png",
        to: "./assets/maskable_icon_192.png",
      },
      {from: "./src/manifest.json", to: "./assets/manifest.json"},
      {from: "./src/assetlinks.json", to: "./.well-known/assetlinks.json"},
      {
        from: "./src/images/screenshots/screenshot_full_720_1280.png",
        to: "./assets/screenshot_full_720_1280.png",
      },
      {
        from: "./src/images/screenshots/screenshot_full_1080_1080.png",
        to: "./assets/screenshot_full_1080_1080.png",
      },
      {
        from: "./src/images/screenshots/screenshot_hint_720_1280.png",
        to: "./assets/screenshot_hint_720_1280.png",
      },
      {
        from: "./src/images/screenshots/screenshot_hint_1080_1080.png",
        to: "./assets/screenshot_hint_1080_1080.png",
      },
      {
        from: "./src/images/screenshots/screenshot_new_720_1280.png",
        to: "./assets/screenshot_new_720_1280.png",
      },
      {
        from: "./src/images/screenshots/screenshot_new_1080_1080.png",
        to: "./assets/screenshot_new_1080_1080.png",
      },
      {
        from: "./src/images/screenshots/screenshot_partial_720_1280.png",
        to: "./assets/screenshot_partial_720_1280.png",
      },
      {
        from: "./src/images/screenshots/screenshot_partial_1080_1080.png",
        to: "./assets/screenshot_partial_1080_1080.png",
      },
      {from: "./src/images/screenshots/demo.webp", to: "./assets/demo.webp"},
    ],
    options: {
      concurrency: 100,
    },
  });

  const serviceWorkerPlugin = new WorkboxPlugin.GenerateSW({
    // This helps ensure that all pages will be controlled by a service worker immediately after that service worker activates
    clientsClaim: true,
    // This skips the service worker waiting phase, meaning the service worker activates as soon as it's finished installing
    skipWaiting: true,
    cacheId: `lexlet-${packageJson.version}`,
    // special case to cache word list for offline play
    maximumFileSizeToCacheInBytes: 4200000,
  });

  const plugins =
    argv.mode === "development"
      ? [definePlugin, htmlPlugin, privacyHtmlPlugin, copyPlugin]
      : [
          definePlugin,
          htmlPlugin,
          privacyHtmlPlugin,
          copyPlugin,
          serviceWorkerPlugin,
        ];

  return {
    entry: "./src/index.js",
    mode: "production",
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          include: [
            path.resolve(__dirname, "src"),
            path.dirname(
              require.resolve("@skedwards88/shared-components/package.json"),
            ),
          ],
          loader: "babel-loader",
          options: {presets: ["@babel/env"]},
        },
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"],
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
          type: "asset/resource",
        },
      ],
    },
    resolve: {extensions: ["*", ".js", ".jsx"]},
    output: {
      publicPath: "",
      filename: "bundle.[fullhash].js",
      path: path.resolve(__dirname, "dist"),
      clean: true, // removes unused files from output dir
    },
    performance: {
      maxEntrypointSize: 2700000, // special case to cache word list for offline play
      maxAssetSize: 2700000, // special case to cache word list for offline play
    },
    devServer: {
      static: "./dist",
    },
    plugins: plugins,
  };
};