From 5c7ed7fbcf8f05248046dcdfd5a73a4331c60f34 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 20 Aug 2024 13:11:42 +0800 Subject: [PATCH] docs: keep webpack dependency in some cases --- website/docs/en/guide/migration/webpack.mdx | 6 ++++++ website/docs/en/guide/tech/vue.mdx | 3 +-- website/docs/zh/guide/migration/webpack.mdx | 6 ++++++ website/docs/zh/guide/tech/vue.mdx | 3 +-- 4 files changed, 14 insertions(+), 4 deletions(-) diff --git a/website/docs/en/guide/migration/webpack.mdx b/website/docs/en/guide/migration/webpack.mdx index 16255959cf3..98c5c85f0b5 100644 --- a/website/docs/en/guide/migration/webpack.mdx +++ b/website/docs/en/guide/migration/webpack.mdx @@ -21,6 +21,12 @@ 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) or [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin). + +This is because these plugins 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. +::: + ## Updating package.json Update your build scripts to use Rspack instead of webpack: diff --git a/website/docs/en/guide/tech/vue.mdx b/website/docs/en/guide/tech/vue.mdx index c533073409d..f5a8396c8bf 100644 --- a/website/docs/en/guide/tech/vue.mdx +++ b/website/docs/en/guide/tech/vue.mdx @@ -59,7 +59,7 @@ At this time, Rspack will use the built-in CSS processor for post-processing. If you don't want to generate CSS files, you can also use a combination of [`css-loader`](https://github.com/webpack-contrib/css-loader) and [`vue-style-loader`](https://github.com/vuejs/vue-style-loader): ```js -const config = { +module.exports = { module: { rules: [ { @@ -73,7 +73,6 @@ const config = { css: false, // At this point, you need to turn off `experiments.css` to adapt to the internal processing logic of `vue-loader` }, }; -module.exports = config; ``` Besides, as Rspack has built-in TS support, we also support `lang="ts"` configuration by default: diff --git a/website/docs/zh/guide/migration/webpack.mdx b/website/docs/zh/guide/migration/webpack.mdx index 723ef5e291f..ce1b6d497ad 100644 --- a/website/docs/zh/guide/migration/webpack.mdx +++ b/website/docs/zh/guide/migration/webpack.mdx @@ -20,6 +20,12 @@ Rspack 的配置是基于 webpack 的设计实现的，以此你能够非常轻 +:::tip +在个别情况下，你仍然需要保留 `webpack` 作为开发依赖，例如使用 [vue-loader](https://github.com/vuejs/vue-loader) 或 [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) 时。 + +这是因为这些插件直接 `import` 了 webpack 的子路径，与 webpack 产生了耦合。如果你遇到了这种情况，可以向这些插件的维护者反馈，询问他们能否将 `webpack` 作为可选依赖。 +::: + ## 修改 package.json 更新构建脚本以使用 Rspack 代替 webpack： diff --git a/website/docs/zh/guide/tech/vue.mdx b/website/docs/zh/guide/tech/vue.mdx index 7659dcf34c1..ec1ef29286e 100644 --- a/website/docs/zh/guide/tech/vue.mdx +++ b/website/docs/zh/guide/tech/vue.mdx @@ -59,7 +59,7 @@ module.exports = config; 如果你不希望生成 CSS 文件，也可以直接配合 [`css-loader`](https://github.com/webpack-contrib/css-loader) 和 [`vue-style-loader`](https://github.com/vuejs/vue-style-loader) 组合使用： ```js -const config = { +module.exports = { module: { rules: [ { @@ -73,7 +73,6 @@ const config = { css: false, // 此时需要关闭 `experiments.css` 以适配 `vue-loader` 内部处理逻辑 }, }; -module.exports = config; ``` 除此之外，由于 Rspack 内置了 TS 的支持，因此我们也默认支持了 `lang="ts"` 的配置：