sound_ai/config/rspack.base.config.ts

// @ts-nocheck
import { type RspackPluginFunction, rspack } from '@rspack/core';
import { VueLoaderPlugin } from 'vue-loader';
import path from 'path';
import { isProd } from '../plugin/getEnv';
import sassEmbedded from 'sass-embedded';
import ESLintPlugin from 'eslint-rspack-plugin';
// import Components from 'unplugin-vue-components/rspack';
import AutoImportPlugin from 'unplugin-auto-import/rspack';
import packageJson from '../package.json';

// 目标浏览器配置
const targets = ['last 2 versions', '> 0.2%', 'not dead', 'Firefox ESR'];

// 基础配置
export const baseConfig = {
  entry: {
    main: './src/main.ts',
  },
  resolve: {
    extensions: ['...', '.ts', '.vue'],
    alias: {
      '@': path.resolve(__dirname, '../src'),
    },
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          experimentalInlineMatchResource: true,
        },
      },
      {
        test: /\.(js|ts)$/,
        use: [
          {
            loader: 'builtin:swc-loader',
            options: {
              jsc: {
                parser: {
                  syntax: 'typescript',
                },
              },
              env: { targets },
            },
          },
        ],
      },
      {
        test: /\.jsx$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'ecmascript',
                jsx: true,
              },
            },
          },
        },
        type: 'javascript/auto',
      },
      {
        test: /\.tsx$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
              },
            },
          },
        },
        type: 'javascript/auto',
      },
      {
        test: /\.d\.ts$/,
        loader: 'ignore-loader',
      },
      // SVG处理规则
      {
        test: /\.svg$/,
        exclude: [path.resolve(__dirname, '../src/assets/icons')],
        type: 'asset/resource',
      },
      {
        test: /\.svg$/,
        include: [path.resolve(__dirname, '../src/assets/icons')],
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              symbolId: 'icon-[name]',
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource',
      },
      // 处理CSS文件
      {
        test: /\.css$/i,
        use: [
          isProd() ? rspack.CssExtractRspackPlugin.loader : 'style-loader',
          'css-loader',
          'postcss-loader',
        ],
      },
      // 处理SCSS/SASS文件
      {
        test: /\.(scss|sass)$/i,
        use: [
          isProd() ? rspack.CssExtractRspackPlugin.loader : 'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              api: 'modern-compiler',
              implementation: sassEmbedded,
              sassOptions: {
                includePaths: [path.resolve(__dirname, '../src/styles')],
              },
              additionalData: '@use "@/styles/variables.scss" as *;',
            },
          },
        ],
        type: 'javascript/auto',
      },
    ],
  },
  plugins: [
    new rspack.CssExtractRspackPlugin({
      filename: '[name].[contenthash].css',
    }),
    new rspack.HtmlRspackPlugin({
      template: './index.html',
      title: packageJson.name || '声音AI平台',
      // favicon: path.resolve(__dirname, '../public/favicon.ico'),
      meta: {
        description: '声音AI平台 - 专业的声音处理与分析工具',
        keywords: '声音AI,音频处理,AI平台,语音识别',
        author: 'Sound AI Team',
      },
      minify: isProd()
        ? {
            removeComments: true,
            collapseWhitespace: true,
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeStyleLinkTypeAttributes: true,
            keepClosingSlash: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
          }
        : false,
    }),

    AutoImportPlugin({
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
      ],
      imports: [
        'vue',
        'vue-router',
        // 可额外添加需要 autoImport 的组件
        {
          // '@/hooks/web/useI18n': ['useI18n'],
          axios: [
            // default imports
            ['default', 'axios'], // import { default as axios } from 'axios',
          ],
        },
      ],
      dts: 'src/types/auto-imports.d.ts',
      // resolvers: [ElementPlusResolver()],
      eslintrc: {
        enabled: false, // Default `false`
        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
      },
    }),
    new rspack.DefinePlugin({
      __VUE_OPTIONS_API__: 'true',
      __VUE_PROD_DEVTOOLS__: 'false',
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
      API_BASE_URL: JSON.stringify(process.env.API_BASE_URL),
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
    new VueLoaderPlugin() as RspackPluginFunction,
    // 添加ESLint插件
    new ESLintPlugin({
      configType: 'flat',
      extensions: ['js', 'jsx', 'ts', 'tsx', 'vue'],
      exclude: ['node_modules', 'dist'],
      emitWarning: true,
      emitError: true,
      failOnError: false,
      failOnWarning: false,
      cache: true,
      cacheLocation: path.resolve(
        __dirname,
        '../node_modules/.cache/.eslintcache',
      ),
    }),
  ],
  optimization: {
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin(),
      new rspack.LightningCssMinimizerRspackPlugin({
        minimizerOptions: { targets },
      }),
    ],
  },
  experiments: {
    futureDefaults: true,
    css: false,
  },
};

export default baseConfig;