react-template/webpack.common.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
const ESLintPlugin = require('eslint-webpack-plugin')
const Dotenv = require('dotenv-webpack')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    assetModuleFilename: 'static/media/[name].[hash][ext]',
  },
  module: {
    rules: [
      {
        test: [/\.avif$/],
        type: 'asset',
        mimetype: 'image/avif',
        parser: {
          dataUrlCondition: {
            maxSize: 1024 * 10,
          },
        },
      },
      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 1024 * 10,
          },
        },
      },
      {
        type: 'asset',
        resourceQuery: /url/,
      },
      {
        test: /\.svg$/,
        issuer: {
          and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
        },
        use: [require.resolve('@svgr/webpack')],
      },
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: require.resolve('babel-loader'),
        options: {
          cacheDirectory: true,
          cacheCompression: false,
        },
      },
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: {
                mode: 'icss',
              },
            },
          },
          require.resolve('postcss-loader'),
        ],
        sideEffects: true,
      },
      {
        test: /\.module\.css$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: true,
            },
          },
          require.resolve('postcss-loader'),
        ],
      },
      // {
      //   test: /\.less$/,
      //   exclude: /\.module\.less$/,
      //   use: [
      //     require.resolve('style-loader'),
      //     {
      //       loader: require.resolve('css-loader'),
      //       options: {
      //         importLoaders: 3,
      //         modules: {
      //           mode: 'icss',
      //         },
      //       },
      //     },
      //     require.resolve('postcss-loader'),
      //     require.resolve('less-loader'),
      //   ],
      //   sideEffects: true,
      // },
      // {
      //   test: /\.module\.less$/,
      //   use: [
      //     require.resolve('style-loader'),
      //     {
      //       loader: require.resolve('css-loader'),
      //       options: {
      //         importLoaders: 3,
      //         modules: true,
      //       },
      //     },
      //     require.resolve('postcss-loader'),
      //     require.resolve('less-loader'),
      //   ],
      // },
    ],
  },
  resolve: {
    modules: ['node_modules'],
    extensions: [
      'web.mjs',
      'mjs',
      'web.js',
      'js',
      'web.ts',
      'ts',
      'web.tsx',
      'tsx',
      'json',
      'web.jsx',
      'jsx',
      '...',
    ],
    alias: {
      'react-native': 'react-native-web',
      src: path.resolve(__dirname, 'src'),
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve(__dirname, 'public/index.html'),
    }),
    new ESLintPlugin({
      extensions: ['js', 'jsx', 'ts', 'tsx'],
    }),
    new WebpackManifestPlugin({
      fileName: 'asset-manifest.json',
      // publicPath:
      generate: (seed, files, entrypoints) => {
        const manifestFiles = files.reduce((manifest, file) => {
          manifest[file.name] = file.path
          return manifest
        }, seed)
        const entrypointFiles = entrypoints.main.filter(
          (fileName) => !fileName.endsWith('.map')
        )

        return {
          files: manifestFiles,
          entrypoints: entrypointFiles,
        }
      },
    }),
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }),
    new Dotenv(),
  ],
  cache: {
    type: 'memory',
  },
}