rspack_vue3_template/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';

// 目标浏览器配置
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',
      },
      {
        test: /\.svg/,
        type: 'asset/resource',
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource',
      },
      // 处理CSS文件
      {
        test: /\.css$/i,
        use: [
          {
            loader: isProd()
              ? rspack.CssExtractRspackPlugin.loader
              : 'style-loader',
            options: {
              publicPath: 'auto',
            },
          },
          'css-loader',
        ],
      },
      // 处理SCSS/SASS文件
      {
        test: /\.(scss|sass)$/i,
        use: [
          {
            loader: isProd()
              ? rspack.CssExtractRspackPlugin.loader
              : 'style-loader',
            options: {
              publicPath: 'auto',
            },
          },

          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              api: 'modern-compiler',
              implementation: sassEmbedded,
            },
          },
        ],
        type: 'javascript/auto',
      },
    ],
  },
  plugins: [
    new rspack.CssExtractRspackPlugin({
      filename: '[name].[contenthash].css',
    }),
    new rspack.HtmlRspackPlugin({
      template: './index.html',
    }),
    // Components({
    //   dirs: ['src/components'],
    //   extensions: ['vue'],
    //   deep: true,
    //   dts: true,
    //   directoryAsNamespace: false,
    //   directives: true,
    // }),
    AutoImportPlugin({
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
      ],
      imports: [
        'vue',
        'vue-router',
        // 可额外添加需要 autoImport 的组件
        {
          // '@/hooks/web/useI18n': ['useI18n'],
        },
      ],
      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,
      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,
  },
};