请举例说明 vue3-sfc-loader 怎么添加qs依赖

对于vue3-sfc-loader，您可以在webpack.config.js中的rules部分添加如下代码：

{
  test: /\.vue$/,
  loader: 'vue3-sfc-loader',
  options: {
    script: 'ts',
    style: {
      postcssPlugins: [
        require('autoprefixer')(),
        require('tailwindcss')(),
      ],
    },
    customBlocks: {
      docs: {
        transform(code) {
          return `<template><div class="docs">${code}</div></template>`;
        },
      },
    },
    extraTransforms: [
      {
        test: (ctx) => { return ctx.descriptor.script?.lang === 'ts' },
        transform: (ctx) => {
          const { content } = ctx;
          return {
            code: content.replace(
              `import { defineComponent } from 'vue';`,
              `${content}
              
              import qs from 'qs';`
            ),
            map: null,
          };
        },
      },
    ],
  },
}

其中的extraTransforms部分会在编译.vue文件时处理额外的转换，我们可以添加一个判断条件，通过判断当前.vue文件中的script标签是否是tsx语言，如果是，我们则在文件中添加对qs依赖的引入。请注意，这种做法并不是很好，我们应该避免在业务代码中这样直接引入依赖，而是应该通过npm等包管理工具进行引入。