rspack.base.config.ts 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. // @ts-nocheck
  2. import { type RspackPluginFunction, rspack } from '@rspack/core';
  3. import { VueLoaderPlugin } from 'vue-loader';
  4. import path from 'path';
  5. import { isProd } from '../plugin/getEnv';
  6. import sassEmbedded from 'sass-embedded';
  7. import ESLintPlugin from 'eslint-rspack-plugin';
  8. // import Components from 'unplugin-vue-components/rspack';
  9. import AutoImportPlugin from 'unplugin-auto-import/rspack';
  10. // 目标浏览器配置
  11. const targets = ['last 2 versions', '> 0.2%', 'not dead', 'Firefox ESR'];
  12. // 基础配置
  13. export const baseConfig = {
  14. entry: {
  15. main: './src/main.ts',
  16. },
  17. resolve: {
  18. extensions: ['...', '.ts', '.vue'],
  19. alias: {
  20. '@': path.resolve(__dirname, '../src'),
  21. },
  22. },
  23. module: {
  24. rules: [
  25. {
  26. test: /\.vue$/,
  27. loader: 'vue-loader',
  28. options: {
  29. experimentalInlineMatchResource: true,
  30. },
  31. },
  32. {
  33. test: /\.(js|ts)$/,
  34. use: [
  35. {
  36. loader: 'builtin:swc-loader',
  37. options: {
  38. jsc: {
  39. parser: {
  40. syntax: 'typescript',
  41. },
  42. },
  43. env: { targets },
  44. },
  45. },
  46. ],
  47. },
  48. {
  49. test: /\.jsx$/,
  50. use: {
  51. loader: 'builtin:swc-loader',
  52. options: {
  53. jsc: {
  54. parser: {
  55. syntax: 'ecmascript',
  56. jsx: true,
  57. },
  58. },
  59. },
  60. },
  61. type: 'javascript/auto',
  62. },
  63. {
  64. test: /\.tsx$/,
  65. use: {
  66. loader: 'builtin:swc-loader',
  67. options: {
  68. jsc: {
  69. parser: {
  70. syntax: 'typescript',
  71. tsx: true,
  72. },
  73. },
  74. },
  75. },
  76. type: 'javascript/auto',
  77. },
  78. {
  79. test: /\.d\.ts$/,
  80. loader: 'ignore-loader',
  81. },
  82. {
  83. test: /\.svg/,
  84. type: 'asset/resource',
  85. },
  86. {
  87. test: /\.(png|jpe?g|gif)$/i,
  88. type: 'asset/resource',
  89. },
  90. // 处理CSS文件
  91. {
  92. test: /\.css$/i,
  93. use: [
  94. isProd() ? rspack.CssExtractRspackPlugin.loader : 'style-loader',
  95. 'css-loader',
  96. 'postcss-loader'
  97. ],
  98. },
  99. // 处理SCSS/SASS文件
  100. {
  101. test: /\.(scss|sass)$/i,
  102. use: [
  103. isProd() ? rspack.CssExtractRspackPlugin.loader : 'style-loader',
  104. 'css-loader',
  105. {
  106. loader: 'sass-loader',
  107. options: {
  108. api: 'modern-compiler',
  109. implementation: sassEmbedded,
  110. sassOptions: {
  111. includePaths: [path.resolve(__dirname, '../src/styles')],
  112. },
  113. additionalData: '@use "@/styles/variables.scss" as *;',
  114. },
  115. },
  116. ],
  117. type: 'javascript/auto',
  118. },
  119. ],
  120. },
  121. plugins: [
  122. new rspack.CssExtractRspackPlugin({
  123. filename: '[name].[contenthash].css',
  124. }),
  125. new rspack.HtmlRspackPlugin({
  126. template: './index.html',
  127. }),
  128. AutoImportPlugin({
  129. include: [
  130. /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
  131. /\.vue$/,
  132. /\.vue\?vue/, // .vue
  133. /\.md$/, // .md
  134. ],
  135. imports: [
  136. 'vue',
  137. 'vue-router',
  138. // 可额外添加需要 autoImport 的组件
  139. {
  140. // '@/hooks/web/useI18n': ['useI18n'],
  141. axios: [
  142. // default imports
  143. ['default', 'axios'], // import { default as axios } from 'axios',
  144. ],
  145. },
  146. ],
  147. dts: 'src/types/auto-imports.d.ts',
  148. // resolvers: [ElementPlusResolver()],
  149. eslintrc: {
  150. enabled: false, // Default `false`
  151. filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
  152. globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  153. },
  154. }),
  155. new rspack.DefinePlugin({
  156. __VUE_OPTIONS_API__: 'true',
  157. __VUE_PROD_DEVTOOLS__: 'false',
  158. __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
  159. API_BASE_URL: JSON.stringify(process.env.API_BASE_URL),
  160. 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  161. }),
  162. new VueLoaderPlugin() as RspackPluginFunction,
  163. // 添加ESLint插件
  164. new ESLintPlugin({
  165. configType: 'flat',
  166. extensions: ['js', 'jsx', 'ts', 'tsx', 'vue'],
  167. exclude: ['node_modules', 'dist'],
  168. emitWarning: true,
  169. emitError: true,
  170. failOnError: false,
  171. failOnWarning: false,
  172. cache: true,
  173. cacheLocation: path.resolve(
  174. __dirname,
  175. '../node_modules/.cache/.eslintcache',
  176. ),
  177. }),
  178. ],
  179. optimization: {
  180. minimizer: [
  181. new rspack.SwcJsMinimizerRspackPlugin(),
  182. new rspack.LightningCssMinimizerRspackPlugin({
  183. minimizerOptions: { targets },
  184. }),
  185. ],
  186. },
  187. experiments: {
  188. futureDefaults: true,
  189. css: false,
  190. },
  191. };
  192. export default baseConfig;