Skip to content

Commit ec24006

Browse files
9aoy9aoy
authored
feat: use rspack-vue-loader to support Vue hot update (#12698)
feat: use rspack-vue-loader to support hotupdate
1 parent b21d2ec commit ec24006

11 files changed

Lines changed: 46 additions & 52 deletions

File tree

‎packages/create-rspack/template-vue-js/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@
1313
"devDependencies": {
1414
"@rspack/cli": "workspace:*",
1515
"@rspack/core": "workspace:*",
16-
"vue-loader": "^17.4.2"
16+
"rspack-vue-loader": "^17.4.5"
1717
}
1818
}

‎packages/create-rspack/template-vue-js/rspack.config.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// @ts-check
22
import { defineConfig } from '@rspack/cli';
33
import { rspack } from '@rspack/core';
4-
import { VueLoaderPlugin } from 'vue-loader';
4+
import { VueLoaderPlugin } from 'rspack-vue-loader';
55

66
// Target browsers, see: https://github.com/browserslist/browserslist
77
const targets = ['last 2 versions', '> 0.2%', 'not dead', 'Firefox ESR'];
@@ -17,7 +17,7 @@ export default defineConfig({
1717
rules: [
1818
{
1919
test: /\.vue$/,
20-
loader: 'vue-loader',
20+
loader: 'rspack-vue-loader',
2121
options: {
2222
experimentalInlineMatchResource: true,
2323
},

‎packages/create-rspack/template-vue-ts/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@
1414
"@rspack/cli": "workspace:*",
1515
"@rspack/core": "workspace:*",
1616
"typescript": "^5.9.3",
17-
"vue-loader": "^17.4.2"
17+
"rspack-vue-loader": "^17.4.5"
1818
}
1919
}

‎packages/create-rspack/template-vue-ts/rspack.config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
rspack,
55
type SwcLoaderOptions,
66
} from '@rspack/core';
7-
import { VueLoaderPlugin } from 'vue-loader';
7+
import { VueLoaderPlugin } from 'rspack-vue-loader';
88

99
// Target browsers, see: https://github.com/browserslist/browserslist
1010
const targets = ['last 2 versions', '> 0.2%', 'not dead', 'Firefox ESR'];
@@ -20,7 +20,7 @@ export default defineConfig({
2020
rules: [
2121
{
2222
test: /\.vue$/,
23-
loader: 'vue-loader',
23+
loader: 'rspack-vue-loader',
2424
options: {
2525
experimentalInlineMatchResource: true,
2626
},

‎pnpm-lock.yaml‎

Lines changed: 29 additions & 35 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tests/e2e/cases/vue3/rspack.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const { DefinePlugin, HtmlRspackPlugin } = require('@rspack/core');
2-
const { VueLoaderPlugin } = require('vue-loader');
2+
const { VueLoaderPlugin } = require('rspack-vue-loader');
33

44
/** @type { import('@rspack/core').RspackOptions } */
55
module.exports = {
@@ -26,7 +26,7 @@ module.exports = {
2626
rules: [
2727
{
2828
test: /\.vue$/,
29-
loader: 'vue-loader',
29+
loader: 'rspack-vue-loader',
3030
options: {
3131
experimentalInlineMatchResource: true,
3232
},

‎tests/e2e/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"typescript": "^5.9.3",
2727
"tailwindcss": "^3.4.19",
2828
"vue": "^3.5.26",
29-
"vue-loader": "^17.4.2",
29+
"rspack-vue-loader": "^17.4.5",
3030
"css-loader": "^7.1.2",
3131
"ws": "^8.18.3"
3232
}

‎website/docs/en/guide/migration/webpack.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Now you can remove the webpack-related dependencies from your project:
2222
<PackageManagerTabs command="remove webpack webpack-cli webpack-dev-server" />
2323

2424
:::tip
25-
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).
25+
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).
2626

2727
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.
2828
:::

‎website/docs/en/guide/tech/vue.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,19 @@ Rspack provides two solutions to support Vue:
1111

1212
## Vue 3
1313

14-
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:
14+
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:
1515

1616
```js title="rspack.config.mjs"
1717
import { defineConfig } from '@rspack/cli';
18-
import { VueLoaderPlugin } from 'vue-loader';
18+
import { VueLoaderPlugin } from 'rspack-vue-loader';
1919

2020
export default defineConfig({
2121
plugins: [new VueLoaderPlugin()],
2222
module: {
2323
rules: [
2424
{
2525
test: /\.vue$/,
26-
loader: 'vue-loader',
26+
loader: 'rspack-vue-loader',
2727
options: {
2828
// Note, for the majority of features to be available, make sure this option is `true`
2929
experimentalInlineMatchResource: true,

‎website/docs/zh/guide/migration/webpack.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Rspack 的配置是基于 webpack 的设计实现的，以此你能够非常轻
2121
<PackageManagerTabs command="remove webpack webpack-cli webpack-dev-server" />
2222

2323
:::tip
24-
在个别情况下，你仍然需要保留 `webpack` 作为开发依赖，例如使用 [vue-loader](https://github.com/vuejs/vue-loader) 时。
24+
在个别情况下，你仍然需要保留 `webpack` 作为开发依赖，例如使用 [vue-loader](https://github.com/vuejs/vue-loader) 时 (你可以使用 [rspack-vue-loader](https://github.com/rstackjs/rspack-vue-loader) 替代)。
2525

2626
这是因为这些库直接 `import` 了 webpack 的子路径，与 webpack 产生了耦合。如果你遇到了这种情况，可以向这些插件的维护者反馈，询问他们能否将 `webpack` 作为可选依赖。
2727
:::

0 commit comments

Comments
 (0)