webpack.config.js

const path = require("path");
const webpack = require("webpack");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const SvelteNodeGUIPreprocessor = require("@nodegui/svelte-nodegui-preprocessor");
const SveltePreprocess = require("svelte-preprocess");

module.exports = (env, argv) => {
  const config = {
    mode: "development",
    entry: ["./src/app.ts"],
    target: "node",
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "index.js",
    },
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg|bmp|otf)$/i,
          use: [
            {
              loader: "file-loader",
              options: { publicPath: "dist" },
            },
          ],
        },
        {
          test: /\.node/i,
          use: [
            {
              loader: "native-addon-loader",
              options: { name: "[name]-[hash].[ext]" },
            },
          ],
        },
        {
          test: /\.ts$/,
          use: {
            loader: "ts-loader",
            options: {
              configFile: path.resolve(__dirname, "tsconfig.json"),
              // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds
              // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement
              transpileOnly: true,
              allowTsInNodeModules: true,
              compilerOptions: {
                sourceMap: argv.mode !== "production",
                declaration: false,
              },
            },
          },
        },
        {
          test: /\.mjs$/,
          type: "javascript/auto",
        },
        {
          test: /\.svelte$/,
          exclude: /node_modules/,
          use: [
            {
              /**
               * Note: Svelte Native uses a minor patch of svelte-loader. I'm not sure of the significance.
               * @see https://github.com/halfnelson/svelte-native/blob/0af94fac6ea18f54f93ab299d0b512f91d722569/demo/package.json#L26
               */
              loader: "svelte-loader",
              options: {
                preprocess: {
                  ...SveltePreprocess(),
                  ...SvelteNodeGUIPreprocessor(),
                },
              },
            },
          ],
        },
      ],
    },
    plugins: [
      new CleanWebpackPlugin(),
      new webpack.DefinePlugin({
        /**
         * This flag defines how the app should handle a hot module update.
         * "live-reload": Sends an exit signal, so will be relaunched if running via nodemon.
         * "hmr": Applies the hot update without exiting the app (not yet implemented!).
         * "none": The app remains alive, but doesn't apply the update.
         * undefined: Same as "none".
         * @type {"live-reload" | "hmr" | "none"}
         */
        __HMR_MODE__: argv.mode === "production" ? '"none"' : '"live-reload"',
        __DEV__: argv.mode === "development" ? "true" : "false",
        __TEST__: "false",
      }),
      {
        apply: (compiler) => {
          compiler.hooks.done.tap("DonePlugin", (stats) => {
            console.log("Compile is done !");
            setTimeout(() => {
              process.exit(0);
            });
          });
        },
      },
    ],
    resolve: {
      extensions: [".ts", ".mjs", ".js", ".svelte", ".scss", ".css", ".json"],
    },
  };

  if (argv.mode === "development" || config.mode === "development") {
    config.mode = "development";
    config.plugins.push(new webpack.HotModuleReplacementPlugin());
    config.plugins.push(new ForkTsCheckerWebpackPlugin());
    config.devtool = "source-map";
    config.watch = true;
    config.entry.unshift("webpack/hot/poll?100");
  }

  return config;
};