TidGi-Desktop/webpack.rules.js

/* eslint-disable @typescript-eslint/restrict-plus-operands */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/restrict-template-expressions */
/* eslint-disable @typescript-eslint/no-unsafe-return */
const tsImportPluginFactory = require('ts-import-plugin');
const styledComponentsTransformerFactory = require('typescript-plugin-styled-components').default;

module.exports = [
  // Add support for native node modules
  {
    test: /\.node$/,
    use: 'node-loader',
  },
  // {
  //   test: /\.(m?js|node)$/,
  //   parser: { amd: true },
  //   use: {
  //     loader: '@zeit/webpack-asset-relocator-loader',
  //     options: {
  //       outputAssetBase: 'native_modules',
  //       emitDirnameAll: true,
  //     },
  //   },
  // },
  {
    // used to load css from npm package, we use styled-components
    test: /\.css$/,
    use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
  },
  {
    test: /\.(t|j)sx?$/,
    exclude: /(node_modules|\.webpack)/,
    use: {
      loader: 'ts-loader',
      options: {
        transpileOnly: true,
        getCustomTransformers: () => ({
          before: [
            styledComponentsTransformerFactory(),
            // lodash
            tsImportPluginFactory({
              style: false,
              libraryName: 'lodash',
              libraryDirectory: null,
              camel2DashComponentName: false,
            }),
            // material-ui
            tsImportPluginFactory({
              libraryName: '@material-ui/core',
              libraryDirectory: '',
              camel2DashComponentName: false,
            }),
            // svg-icons
            tsImportPluginFactory({
              libraryDirectory: (importName) => {
                const stringVec = importName
                  .split(/([A-Z][a-z]+|\d*)/)
                  .filter((s) => s.length)
                  .map((s) => s.toLocaleLowerCase());

                return stringVec.reduce((accumulator, current, index) => {
                  if (index > 1) {
                    return `${accumulator}-${current}`;
                  } else if (index === 1) {
                    return `${accumulator}/${current}`;
                  }
                  return accumulator + current;
                }, '');
              },
              libraryName: '@material-ui/icons',
              style: false,
              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: 'es2015',
        },
      },
    },
  },
  {
    test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'fonts/',
        },
      },
    ],
  },
  {
    test: /\.(png|jpe?g|gif|svg)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
        },
      },
      {
        loader: 'image-webpack-loader',
        options: {
          query: {
            mozjpeg: {
              progressive: true,
            },
            gifsicle: {
              interlaced: true,
            },
            optipng: {
              optimizationLevel: 7,
            },
          },
        },
      },
    ],
  },
];