diff --git a/packages/create-rspack/template-vue-js/package.json b/packages/create-rspack/template-vue-js/package.json index d4b8f17fa061..ad213a956b8a 100644 --- a/packages/create-rspack/template-vue-js/package.json +++ b/packages/create-rspack/template-vue-js/package.json @@ -13,6 +13,6 @@ "devDependencies": { "@rspack/cli": "workspace:*", "@rspack/core": "workspace:*", - "vue-loader": "^17.4.2" + "rspack-vue-loader": "^17.4.5" } } diff --git a/packages/create-rspack/template-vue-js/rspack.config.mjs b/packages/create-rspack/template-vue-js/rspack.config.mjs index 6520a45a3169..71ddc927a469 100644 --- a/packages/create-rspack/template-vue-js/rspack.config.mjs +++ b/packages/create-rspack/template-vue-js/rspack.config.mjs @@ -1,7 +1,7 @@ // @ts-check import { defineConfig } from '@rspack/cli'; import { rspack } from '@rspack/core'; -import { VueLoaderPlugin } from 'vue-loader'; +import { VueLoaderPlugin } from 'rspack-vue-loader'; // Target browsers, see: https://github.com/browserslist/browserslist const targets = ['last 2 versions', '> 0.2%', 'not dead', 'Firefox ESR']; @@ -17,7 +17,7 @@ export default defineConfig({ rules: [ { test: /\.vue$/, - loader: 'vue-loader', + loader: 'rspack-vue-loader', options: { experimentalInlineMatchResource: true, }, diff --git a/packages/create-rspack/template-vue-ts/package.json b/packages/create-rspack/template-vue-ts/package.json index 4c8dd11137df..782d7af1ace5 100644 --- a/packages/create-rspack/template-vue-ts/package.json +++ b/packages/create-rspack/template-vue-ts/package.json @@ -14,6 +14,6 @@ "@rspack/cli": "workspace:*", "@rspack/core": "workspace:*", "typescript": "^5.9.3", - "vue-loader": "^17.4.2" + "rspack-vue-loader": "^17.4.5" } } diff --git a/packages/create-rspack/template-vue-ts/rspack.config.ts b/packages/create-rspack/template-vue-ts/rspack.config.ts index e6bca03f4594..844caa0afbc3 100644 --- a/packages/create-rspack/template-vue-ts/rspack.config.ts +++ b/packages/create-rspack/template-vue-ts/rspack.config.ts @@ -4,7 +4,7 @@ import { rspack, type SwcLoaderOptions, } from '@rspack/core'; -import { VueLoaderPlugin } from 'vue-loader'; +import { VueLoaderPlugin } from 'rspack-vue-loader'; // Target browsers, see: https://github.com/browserslist/browserslist const targets = ['last 2 versions', '> 0.2%', 'not dead', 'Firefox ESR']; @@ -20,7 +20,7 @@ export default defineConfig({ rules: [ { test: /\.vue$/, - loader: 'vue-loader', + loader: 'rspack-vue-loader', options: { experimentalInlineMatchResource: true, }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 257445961ef0..787fb12e404f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -319,9 +319,9 @@ importers: '@rspack/core': specifier: workspace:* version: link:../../rspack - vue-loader: - specifier: ^17.4.2 - version: 17.4.2(vue@3.5.26(typescript@5.9.3))(webpack@5.102.1) + rspack-vue-loader: + specifier: ^17.4.5 + version: 17.4.5(vue@3.5.26(typescript@5.9.3))(webpack@5.102.1) packages/create-rspack/template-vue-ts: dependencies: @@ -335,12 +335,12 @@ importers: '@rspack/core': specifier: workspace:* version: link:../../rspack + rspack-vue-loader: + specifier: ^17.4.5 + version: 17.4.5(vue@3.5.26(typescript@5.9.3))(webpack@5.102.1) typescript: specifier: ^5.9.3 version: 5.9.3 - vue-loader: - specifier: ^17.4.2 - version: 17.4.2(vue@3.5.26(typescript@5.9.3))(webpack@5.102.1) packages/rspack: dependencies: @@ -690,6 +690,9 @@ importers: react-refresh: specifier: ^0.18.0 version: 0.18.0 + rspack-vue-loader: + specifier: ^17.4.5 + version: 17.4.5(vue@3.5.26(typescript@5.9.3))(webpack@5.102.1) tailwindcss: specifier: ^3.4.19 version: 3.4.19(ts-node@10.9.2(@types/node@20.19.27)(typescript@5.9.3)) @@ -699,9 +702,6 @@ importers: vue: specifier: ^3.5.26 version: 3.5.26(typescript@5.9.3) - vue-loader: - specifier: ^17.4.2 - version: 17.4.2(vue@3.5.26(typescript@5.9.3))(webpack@5.102.1) ws: specifier: ^8.18.3 version: 8.18.3 @@ -5772,9 +5772,6 @@ packages: resolution: {integrity: sha512-Bb33KbowVTIj5s7Ked1OsqHUeCpz//tPwR+E2zJgJKo9Z5XolZ9b6bdUgjmYlwnWhoOQKoTd1TYToZGn5mAYOg==} engines: {node: '>= 0.8'} - hash-sum@2.0.0: - resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==} - hash.js@1.1.7: resolution: {integrity: sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==} @@ -7582,6 +7579,18 @@ packages: '@rsbuild/core': optional: true + rspack-vue-loader@17.4.5: + resolution: {integrity: sha512-i88hGa4mySkwiP7HqRICIAhomcMdkNCZ5tQGcxkcUWmDfC2QfeQegFBEKY4RdbuxJ3p1Ocj/Ul6Sh4yl6L7mDg==} + peerDependencies: + '@vue/compiler-sfc': '*' + vue: '*' + webpack: ^5.0.0 + peerDependenciesMeta: + '@vue/compiler-sfc': + optional: true + vue: + optional: true + rspress-plugin-font-open-sans@1.0.3: resolution: {integrity: sha512-17i7uUqvyy5k51ggZJ5xoP9duqC2W76GcBviIu400VXXAQEZx3JzZWPcGz9gGmVaFHAkH19NtZK0EYKfneX4rw==} peerDependencies: @@ -8537,18 +8546,6 @@ packages: vscode-uri@3.1.0: resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==} - vue-loader@17.4.2: - resolution: {integrity: sha512-yTKOA4R/VN4jqjw4y5HrynFL8AK0Z3/Jt7eOJXEitsm0GMRHDBjCfCiuTiLP7OESvsZYo2pATCWhDqxC5ZrM6w==} - peerDependencies: - '@vue/compiler-sfc': '*' - vue: '*' - webpack: ^4.1.0 || ^5.0.0-0 - peerDependenciesMeta: - '@vue/compiler-sfc': - optional: true - vue: - optional: true - vue@3.5.26: resolution: {integrity: sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==} peerDependencies: @@ -13775,8 +13772,6 @@ snapshots: safe-buffer: 5.2.1 to-buffer: 1.2.2 - hash-sum@2.0.0: {} - hash.js@1.1.7: dependencies: inherits: 2.0.4 @@ -16096,6 +16091,14 @@ snapshots: optionalDependencies: '@rsbuild/core': 1.7.2 + rspack-vue-loader@17.4.5(vue@3.5.26(typescript@5.9.3))(webpack@5.102.1): + dependencies: + chalk: 4.1.2 + watchpack: 2.4.4 + webpack: 5.102.1 + optionalDependencies: + vue: 3.5.26(typescript@5.9.3) + rspress-plugin-font-open-sans@1.0.3(@rspress/core@2.0.0-rc.4(@types/react@19.2.7)): dependencies: '@rspress/core': 2.0.0-rc.4(@types/react@19.2.7) @@ -17084,15 +17087,6 @@ snapshots: vscode-uri@3.1.0: {} - vue-loader@17.4.2(vue@3.5.26(typescript@5.9.3))(webpack@5.102.1): - dependencies: - chalk: 4.1.2 - hash-sum: 2.0.0 - watchpack: 2.4.4 - webpack: 5.102.1 - optionalDependencies: - vue: 3.5.26(typescript@5.9.3) - vue@3.5.26(typescript@5.9.3): dependencies: '@vue/compiler-dom': 3.5.26 diff --git a/tests/e2e/cases/vue3/rspack.config.js b/tests/e2e/cases/vue3/rspack.config.js index c0ec2af72a12..1412af1a740d 100644 --- a/tests/e2e/cases/vue3/rspack.config.js +++ b/tests/e2e/cases/vue3/rspack.config.js @@ -1,5 +1,5 @@ const { DefinePlugin, HtmlRspackPlugin } = require('@rspack/core'); -const { VueLoaderPlugin } = require('vue-loader'); +const { VueLoaderPlugin } = require('rspack-vue-loader'); /** @type { import('@rspack/core').RspackOptions } */ module.exports = { @@ -26,7 +26,7 @@ module.exports = { rules: [ { test: /\.vue$/, - loader: 'vue-loader', + loader: 'rspack-vue-loader', options: { experimentalInlineMatchResource: true, }, diff --git a/tests/e2e/package.json b/tests/e2e/package.json index 91aec6b99d9e..544df3c9b94e 100644 --- a/tests/e2e/package.json +++ b/tests/e2e/package.json @@ -26,7 +26,7 @@ "typescript": "^5.9.3", "tailwindcss": "^3.4.19", "vue": "^3.5.26", - "vue-loader": "^17.4.2", + "rspack-vue-loader": "^17.4.5", "css-loader": "^7.1.2", "ws": "^8.18.3" } diff --git a/website/docs/en/guide/migration/webpack.mdx b/website/docs/en/guide/migration/webpack.mdx index 446cb84a00a3..1df5511a1651 100644 --- a/website/docs/en/guide/migration/webpack.mdx +++ b/website/docs/en/guide/migration/webpack.mdx @@ -22,7 +22,7 @@ Now you can remove the webpack-related dependencies from your project: :::tip -In some cases, you will still need to keep `webpack` as a dev dependency, such as when using [vue-loader](https://github.com/vuejs/vue-loader). +In some cases, you will still need to keep `webpack` as a dev dependency, such as when using [vue-loader](https://github.com/vuejs/vue-loader) (you can use [rspack-vue-loader](https://github.com/rstackjs/rspack-vue-loader) instead). This is because these packages directly `import` subpaths of webpack and couple with webpack. If you encounter this issue, you can provide feedback to the maintainers of these plugins, asking them if they can make `webpack` an optional dependency. ::: diff --git a/website/docs/en/guide/tech/vue.mdx b/website/docs/en/guide/tech/vue.mdx index 4a6aab6db717..7d97e57da1c1 100644 --- a/website/docs/en/guide/tech/vue.mdx +++ b/website/docs/en/guide/tech/vue.mdx @@ -11,11 +11,11 @@ Rspack provides two solutions to support Vue: ## Vue 3 -Currently, Vue 3 is supported by Rspack. Please make sure your [vue-loader](https://github.com/vuejs/vue-loader) version is >= 17.2.2 and configure as follows: +Currently, Vue 3 is supported by Rspack. Please make sure your [rspack-vue-loader](https://github.com/rstackjs/rspack-vue-loader) version is >= 17.2.2 and configure as follows: ```js title="rspack.config.mjs" import { defineConfig } from '@rspack/cli'; -import { VueLoaderPlugin } from 'vue-loader'; +import { VueLoaderPlugin } from 'rspack-vue-loader'; export default defineConfig({ plugins: [new VueLoaderPlugin()], @@ -23,7 +23,7 @@ export default defineConfig({ rules: [ { test: /\.vue$/, - loader: 'vue-loader', + loader: 'rspack-vue-loader', options: { // Note, for the majority of features to be available, make sure this option is `true` experimentalInlineMatchResource: true, diff --git a/website/docs/zh/guide/migration/webpack.mdx b/website/docs/zh/guide/migration/webpack.mdx index fc254de445a1..5e30285d0d44 100644 --- a/website/docs/zh/guide/migration/webpack.mdx +++ b/website/docs/zh/guide/migration/webpack.mdx @@ -21,7 +21,7 @@ Rspack 的配置是基于 webpack 的设计实现的，以此你能够非常轻 :::tip -在个别情况下，你仍然需要保留 `webpack` 作为开发依赖，例如使用 [vue-loader](https://github.com/vuejs/vue-loader) 时。 +在个别情况下，你仍然需要保留 `webpack` 作为开发依赖，例如使用 [vue-loader](https://github.com/vuejs/vue-loader) 时 (你可以使用 [rspack-vue-loader](https://github.com/rstackjs/rspack-vue-loader) 替代)。 这是因为这些库直接 `import` 了 webpack 的子路径，与 webpack 产生了耦合。如果你遇到了这种情况，可以向这些插件的维护者反馈，询问他们能否将 `webpack` 作为可选依赖。 ::: diff --git a/website/docs/zh/guide/tech/vue.mdx b/website/docs/zh/guide/tech/vue.mdx index 9c30bdd4cc03..e56b98d96e75 100644 --- a/website/docs/zh/guide/tech/vue.mdx +++ b/website/docs/zh/guide/tech/vue.mdx @@ -11,11 +11,11 @@ Rspack 提供两种方案来支持 Vue： ## Vue 3 -目前，Rspack 已经完成了对 Vue 3 的支持，请确保你的 [vue-loader](https://github.com/vuejs/vue-loader) 版本 >= 17.2.2，并进行如下配置： +目前，Rspack 已经完成了对 Vue 3 的支持，请确保你的 [rspack-vue-loader](https://github.com/rstackjs/rspack-vue-loader) 版本 >= 17.2.2，并进行如下配置： ```js title="rspack.config.mjs" import { defineConfig } from '@rspack/cli'; -import { VueLoaderPlugin } from 'vue-loader'; +import { VueLoaderPlugin } from 'rspack-vue-loader'; export default defineConfig({ plugins: [new VueLoaderPlugin()], @@ -23,7 +23,7 @@ export default defineConfig({ rules: [ { test: /\.vue$/, - loader: 'vue-loader', + loader: 'rspack-vue-loader', options: { // 注意，为了绝大多数功能的可用性，请确保该选项为 `true` experimentalInlineMatchResource: true,