Rspack0.2发布也有一段时间了，官方也对Vue进行了适配和支持，昨天看了开发者大会上web-infra成员对rspack进行了详细介绍和一些问题解答，笔者心血来潮就想尝试一下rspack好不好用。那么我们尝试用Vue来搭建一个简单的框架，本文章只涉及Rspack相关的一些插件配置和使用，像vue-router、vue-use、组件封装这些业务代码就不过多展开说了。这估计是掘金全网第一篇使用Rspack搭建Vue开发环境的文章了，如有错误可以在评论区支持，有争议的地方也可以在评论区友好讨论，那么废话不多说，直接开始折腾！

起步

首先我们根据官方文档的流程，用repack的cli创建一个简单的模板：

pnpm create rspack@latest

选择vue框架

cd your-project
pnpm i
pnpm dev

看到控制台打印出了启动地址，打开就能看到最简单的demo了。

配置插件

接下来会展示安装一些vue3最基础和进阶用到的一些插件，分别是：

• unplugin-auto-import: 按需自动import插件
• unplugin-vue-components：按需自动import并注册组件插件
• unocss、less、sass：css相关
• unplugin-icons：icon插件

还有一些进阶配置：

• TypeScript: 使用类型检查让你的代码变的更健壮吧！
• Eslint：配合静态检查和代码规范继续增强你的代码！

unplugin-auto-import和unplugin-vue-components安装

首先执行：

pnpm add -D unplugin-auto-import unplugin-vue-components

在rspack.config.js使用这两个插件：

const { VueLoaderPlugin } = require("vue-loader");

const config = {
  ...
  plugins: [
    new VueLoaderPlugin(),
    require("unplugin-vue-components/rspack")(),
    require("unplugin-auto-import/rspack")({
      imports: ["vue"],
      dirs: ["./src/hooks/**"],
    }),
  ],
  ...
};

module.exports = config;

为了尝试使用auto-import，我们先在src目录下创建一个hooks目录，并创建useCount.js，这里我直接复制vueuse里的useCounter代码来展示

import { ref } from "vue";

export function useCounter(initialValue = 0, options = {}) {
  const count = ref(initialValue);

  const { max = Infinity, min = -Infinity } = options;

  const inc = (delta = 1) => (count.value = Math.min(max, count.value + delta));
  const dec = (delta = 1) => (count.value = Math.max(min, count.value - delta));
  const get = () => count.value;
  const set = (val) => (count.value = Math.max(min, Math.min(max, val)));
  const reset = (val = initialValue) => {
    initialValue = val;
    return set(val);
  };

  return { count, inc, dec, get, set, reset };
}

为了试探auto-import有没有生效，我们打开 components/HelloWorld.vue ，修改script部分：

<script setup>
defineProps({
  msg: String,
});
const { count } = useCount(0);
</script>

然后再打开一次，发现......并没有生效，折腾了一遍发现，unplugin对rspask的支持有问题，笔者已经在给作者提pr解决了，（´-﹏-`；）

这段代码在vite、webpack的环境下是能正常运行的，在rspack里面因为漏掉了一段代码导致没有扫描到我们的src/hook文件夹，所以这里我们先改成使用vue的ref吧，然后等待托尼老师合并pr解决这个问题。

<script setup>
defineProps({
  msg: String,
});
const { count } = ref(0);
</script>

23-7-4更新：unplugin-auto-import@0.16.5及更高的版本修复这个问题，可以放心使用<(￣︶￣)>

rspack的热更新好像有点问题，需要退出再重启启动，再次启动就能发现正常运行了。

然后就是unplugin-auto-import的使用了，也是很简单，默认配置下，插件会扫描我们的src/components目录，放在这个目录下的组件都能自动按需引入和注册，那么我们来改一下App.vue文件：

<script setup>
// 去掉import HelloWorld from "./components/HelloWorld.vue";
let title = "Rspack + Vue";
</script>

其实我们components目录下的组件不一定要放在components根目录下，也可以类似：src/components/business/MyTabel.vue或者src/components/MyTabel/index.vue又或者src/components/business/MyTabel/index.vue

这样都能识别到我们的MyTabel组件，然后可以直接：<my-tabel />这样使用

然后看一眼我们的页面和控制台，没有任何问题，很nice。

unocss、less、sass

关于原子化CSS，这个框架争议性比较大，这里仅代表笔者的观点说明一下，原子化css能给我们带来的好处：

• 开发更便捷
• 不需要一个class名想半天
• 不会被同事的class名和css代码恶心到
• 配合iconify强大的图标库，更方便的使用图标
• 直接加载本地svg文件，不再需要别的插件（也可以使用unplugin-icons）

所以笔者本人是强力推荐使用的，但是肯定会有小伙伴说：啊，原子化css就是个辣鸡，写个样式还需要背这么多规则，而且很丑。

至于规则嘛，刚开始我也是打开tailwind的文档再开始写代码，不懂的规则就去查一下，写了一两天之后基本上能把不看文档写了（这叫熟能生巧）

至于丑吗，可以开启属性模式，有一定的改善。

当然用不用肯定也是取决于大家的看法，萝卜青菜各有所爱。

less、sass

因为rspack内置了对css的支持，所以如果你想要用less还是sass，只需要安装对应的loader就行了，一般项目只需要用到一个，这里为了方便演示就装两个吧：

pnpm add -D less-loader sass-loader sass less

修改rspack.config.js:

const { VueLoaderPlugin } = require("vue-loader");

const config = {
  ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          experimentalInlineMatchResource: true,
        },
      },
      {
        test: /\.svg/,
        type: "asset/resource",
      },
      {
        test: /\.less$/,
        loader: "less-loader",
        type: "css",
      },
	  {
        test: /\.scss$/,
        loader: "sass-loader",
        type: "css",
      },
    ],
  },
  ...
};

module.exports = config;

然后我们将App.vue的style代码改一下：

<style scoped lang="scss">
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
  &vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
  }
  &:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
}
</style>

嗯，完美支持，需要less的话就将lang改成less就行了。

unocss

笔者尝试了用unocss/webpack的插件去调试，发现好像是用不了，我也尝试了将这个webpack的插件改成rspack的插件，但是官方好像并没有发布rspack-source这个包到npm，所以没办法简单的复制粘贴修改，所以暂时可能用不了......（´-﹏-`；）

unplugin-icons

既然用不了unocss的icon，那么就试试用unplugin-icons去展示icon。

经过一番折腾，好像还是用不了，unplugin-icons是用resolveId这个hook去支持虚拟模块，在webpack这边是使用一个社区的webpack-virtual-modules包去支持虚拟模块，但是rspack社区还没有，那还是用不了，寄！

折腾了一个上午，发现好像社区确实不是很完善，web-infra团队要加油努力了！typescript和eslint还是留到下一篇吧。

23-7-4更新：和Rspack维护者交流过了，webpack-source包应该是可以直接在JS这边用的，webpack-virtual-modules包在Rspack这边是rspack-plugin-virtual-module实现，目前unocss和unplugin-icons实现对Rspack的支持还需要官方实现resolve的plugin接入能力，