rspack_vue3_template/rspack.base.config.ts

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

// 目标浏览器配置
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: /\.svg/,
        type: 'asset/resource',
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource',
      },
      {
        oneOf: [
          {
            test: /\.css$/i,
            use: [
              isProd() ? rspack.CssExtractRspackPlugin.loader : 'style-loader',
              'css-loader',
            ],
            type: 'javascript/auto',
          },

          {
            test: /\.(sass|scss)$/,
            use: [
              isProd() ? rspack.CssExtractRspackPlugin.loader : 'style-loader',
              'css-loader',
              {
                loader: 'sass-loader',
                options: {
                  api: 'modern-compiler',
                  implementation: sassEmbedded,
                },
              },
            ],
            type: 'javascript/auto',
          },
        ],
      },
    ],
  },
  plugins: [
    new rspack.HtmlRspackPlugin({
      template: './index.html',
    }),
    require('unplugin-auto-import/rspack').default({
      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,
  ],
  optimization: {
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin(),
      new rspack.LightningCssMinimizerRspackPlugin({
        minimizerOptions: { targets },
      }),
    ],
  },
  experiments: {
    css: true,
  },
};