TidGi-Desktop/webpack.rules.js

/* eslint-disable @typescript-eslint/no-require-imports */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */

const tsImportPluginFactory = require('ts-import-plugin');
const fs = require('fs');
const JSON5 = require('json5');

const isTest = process.env.NODE_ENV === 'test';
const isDevelopment = process.env.NODE_ENV === 'development';
const isDevelopmentOrTest = isDevelopment || isTest;

// shared asset rules
const assetRules = [
  {
    test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
    type: 'asset',
  },
  {
    test: /\.(png|jpe?g|gif|svg)$/,
    type: 'asset',
  },
];

const cssRule = {
  // used to load css from npm package, we use styled-components but some dependencies may require css files
  test: /\.css$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
};

const nativeRules = [
  {
    // We're specifying native_modules in the test because the asset relocator loader generates a
    // "fake" .node file which is really a cjs file.
    test: /native_modules\/.+\.node$/,
    use: 'node-loader',
  },
  {
    test: /\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@vercel/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
];

// ts-loader based rule used for main process (safer for node/electron main)
const tsLoaderRule = {
  test: /\.(t|j)sx?$/,
  exclude: /(node_modules|\.webpack)/,
  use: {
    loader: 'ts-loader',
    options: {
      transpileOnly: true,
      getCustomTransformers: () => ({
        before: [
          // lodash
          tsImportPluginFactory({
            style: false,
            libraryName: 'lodash',
            libraryDirectory: null,
            camel2DashComponentName: false,
          }),
          // material-ui
          tsImportPluginFactory({
            libraryName: '@mui/material',
            libraryDirectory: '',
            camel2DashComponentName: false,
          }),
          // RXJS
          tsImportPluginFactory([
            {
              libraryDirectory: '../_esm5/internal/operators',
              libraryName: 'rxjs/operators',
              camel2DashComponentName: false,
              transformToDefaultImport: false,
            },
            {
              libraryDirectory: '../_esm5/internal/observable',
              libraryName: 'rxjs',
              camel2DashComponentName: false,
              transformToDefaultImport: false,
            },
          ]),
        ],
      }),
      compilerOptions: {
        module: 'esnext',
      },
    },
  },
};

// esbuild-loader based rule for renderer to speed up dev builds
const esbuildLoaderRule = {
  test: /\.(t|j)sx?$/,
  exclude: /(node_modules|\.webpack)/,
  loader: 'esbuild-loader',
  options: {
    loader: 'tsx',
    target: 'ES2022',
    tsconfigRaw: JSON5.parse(fs.readFileSync('./tsconfig.json')),
  },
};

module.exports = {
  renderer: [cssRule, isDevelopmentOrTest ? esbuildLoaderRule : tsLoaderRule, ...assetRules],
  main: [...nativeRules, tsLoaderRule],
  isDevelopmentOrTest,
  isDevelopment,
};