// @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 { ElementPlusResolver } from 'unplugin-vue-components/resolvers' 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', ), }), // 添加组件自动导入插件 Components({ // 配置组件目录,默认为 src/components dirs: ['src/components'], // 组件的有效文件扩展名 extensions: ['vue'], // 搜索子目录 deep: true, // 自定义组件的解析器 resolvers: [ElementPlusResolver()], // 生成 TypeScript 声明文件 dts: 'src/types/components.d.ts', // 允许子目录作为组件的命名空间前缀 directoryAsNamespace: true, // 自动导入指令 directives: true, }), ], optimization: { minimizer: [ new rspack.SwcJsMinimizerRspackPlugin(), new rspack.LightningCssMinimizerRspackPlugin({ minimizerOptions: { targets }, }), ], }, experiments: { futureDefaults: true, css: false, }, }; export default baseConfig;