rspack 使用构建vue3脚手架-易微帮

基于 Rust 的高性能 Web 构建工具。rspack 主要适配 webpack 生态，对于绝大多数 webpack 工具库都是支持的。

启动速度快；增量热更新快。
兼容 webpack 生态；内置了 ts、jsx、css、css modules 等开箱即用。
生产优化，tree shaking、代码压缩。

基本使用

创建项目rspack-vue3,安装@rspack/cli

$> npm init -y
$> npm install -D @rspack/cli

通过rspack.config.js文件来配置编译打包项,在跟项目中创建文件rspack.config.js。entry编译入口指向src/index.js;output配置构建输出

const path = require("path");

module.exports = {
  entry: {
    main: "./src/index.js",
  },
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
};

在src/index.js文件中定义渲染函数并调用。在package.json增加脚本执行命令"build": "rspack build"

// 渲染函数
const render = () => {
  document.getElementById("app").innerHTML = "hello world";
};

render();

执行构建，npm run build编译输出，可以看到dist目录的输出。在 dist 目录中新建index.html引入编译文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="./main.js"></script>
</html>

在浏览器中访问文件index.html，可以看到正常展示。

在package.json增加脚本执行命令"dev": "rspack serve"用于开发环境。rspack 内置了对 html 的支持，就无须我们手动创建配置 index.html 了。

创建 html 模板文件public/index.html,配置rspack.config.js并指向 html 文件

const path = require("path");

module.exports = {
  // ...
  builtins: {
    html: [{ template: path.resolve(__dirname, "public/index.html") }],
  },
};

再次执行构建，可以看到自动在 dist 目录下生成了index.html

更新@rspack/cli版本,修改了使用方式，查看后面的章节说明

配置对`vue3`的支持

安装vue、 vue-loader，vue-loader 版本必须>=17.2.2

&> npm i vue vue-loader

修改配置rspack.config.js，增加对 vue 单文件组件的解析

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

module.exports = {
  //...
  plugins: [new VueLoaderPlugin()],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          experimentalInlineMatchResource: true,
        },
      },
    ],
  },
};

创建src/App.vue文件，并修改src/index.js入口文件，按照 vue 的使用方式引入组件、创建实例、挂载；

import { createApp } from "vue";

import App from "./App.vue";

// 创建实例
const app = createApp(App);

app.mount("#app");
// 渲染函数
// const render = () => {
//   document.getElementById("app").innerHTML = App;
// };

// render();

配置`less-loader`

rspack 内置 css 模块的编译，对于 css 预处理器，只需安装后配置好。

$> npm i less-loader

修改配置，增加对 less 的解析。调整App.vuestyle 样式，嵌套书写 less 样式。

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        loader: "less-loader",
        type: "css",
      },
    ],
  },
};

如果不希望生成 css 文件，将 css 样式内联到 js 中，可以配置css-loader\vue-style-loader

$> npm i css-loader vue-style-loader -D

修改配置,npm run build可以看到没有额外的 css 文件生成。这里面有一个type: "javascript/auto"配置，它的作用是标记了资源的类型，而 rspack 根据类型有内置的处理方式。

当使用了css-loader\vue-style-loader后，就不需要原生的 css 支持，关闭配置experiments.css:false。会发生冲突。

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: ["vue-style-loader", "css-loader", "less-loader"],
        type: "javascript/auto",
      },
    ],
  },
  experiments: {
    css: false,
  },
};

支持`JSX`

酷爱使用的 jsx 必须要配置上，由于 rspack 对预 webpack 插件的兼容，大多数 webpack 的插件可用。

安装babel-loader \ @babel/core \ @vue/babel-plugin-jsx

$> npm i babel-loader @babel/core @vue/babel-plugin-jsx -D

修改配置，添加对 jsx 文件的解析。新建文件src/views/index.jsx创建 vue 组件，然后引入到App.vue中使用渲染。

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.jsx$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              plugins: ["@vue/babel-plugin-jsx"],
            },
          },
        ],
      },
    ],
  },
};

组件文件代码可以查看仓库

其他配置项

安装其他依赖库vuex/vue-router/element-plus

$> npm i vuex vue-router element-plus dayjs axios element-plus

这些都是 vue 的配套设施，这里不再多写了，每个项目里配置都差不多。
还有代码规范、提交规范等

$> npm i husky eslint eslint-plugin-vue eslint-config-prettier @commitlint/cli @commitlint/config-conventional -D

配置好之后，就可以创建项目去开发业务系统了。😄

全量导入`element-plus`样式时，编译报错

因为之前在配置.vue文件样式时增加了配置 experiments: { css: false },关闭了默认的 css 样式处理，需要手动增加 rules 配置来处理

安装style-loader,增加配置处理.css文件的处理。

{
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ];
  }
}

也可以使用vue-style-loader替代style-loader，都是解决项目加载 css 样式的问题，style-loader不局限 vue 项目，功能更多一点。

`resolve.alias` 定义路径别名

配置 rspack.config.js,extensions配置解析的模块。

{
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
    extensions: [".js", ".jsx", ".vue",".mjs"],
  },
}

升级到了`rspack@0.5`,需要单独安装`@rspack/core`

将之前配置的builtins.html ,调整为内置的插件进行配置

const rspack = require("@rspack/core");

// ...
{
  // builtins: {
  //   html: [{ template: path.resolve(__dirname, "public/index.html") }],
  // },
  plugins: [
    new VueLoaderPlugin(),
    new rspack.HtmlRspackPlugin({ template: "public/index.html" }),
  ],
}

最近已经发布了rspack@0.6 ，更新速度还是可以的。对于 webpack 生态的兼容，很适合旧项目的迁移升级。😀

`rsbuild` 基于 rspack 的构建工具

官方推荐的基于 rspack 的 web 构建工具。是 webpack 迁移到 rspack 的最佳方案。

易于配置，提供开箱即用的构建能力。
集成了 Rspack，SWC 和 Lightning CSS 等高性能工具。
内置插件系统，可以使用现有大多数的 webpack 插件和所有的 rspack 插件

`npm create rsbuild@latest` 按照提示

选择了vue3\typescript,暂时没有其他的选项

安装好依赖npm i,启动：

安装@rsbuild/plugin-babel @rsbuild/plugin-vue-jsx 支持 vue jsx/tsx 语法

新增配置rsbuild.config.ts

import { defineConfig } from "@rsbuild/core";
import { pluginVue } from "@rsbuild/plugin-vue";
import { pluginBabel } from "@rsbuild/plugin-babel";
import { pluginVueJsx } from "@rsbuild/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
      exclude: /[\\/]node_modules[\\/]/,
    }),
    pluginVueJsx(),
    pluginVue(),
  ],
});

安装vue配套设施vuex\vue-router\axios等。完善整个脚手架。详情查看仓库https://gitee.com/ngd_b/rspack-vue3/tree/rsbuild-vue3/

`npx rsbuild inspect` 查看默认的配置

包含两个文件rsbuild.config.mjs\rspack.config.web，可以通过项目下的rsbuild.config.ts文件进行修改。

可通过--env production 选项来输出生成环境下的配置。

增加路径别名，引文是 ts 项目，所以优先在tsconfig.json中配置，也可以在rsbuild.config.ts

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

内置了less\sass预处理器。
重新配置了 html 模板，新建pulbic目录，创建index.html文件，修改配置

{
  html:{
    template:"./public/index.html"
  },
}

`rsdoctor` 构建分析工具

可以将编译行为及耗时可视化展示。只支持构建过程分析；自定义构建扫描规则。

安装:

$> npm add @rsdoctor/rspack-plugin -D

增加配置rsbuild.config.ts

import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';


{
  tools:{
    rspack(config, { appendPlugins }) {
      // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
      if (process.env.RSDOCTOR) {
        appendPlugins(
          new RsdoctorRspackPlugin({
            // 插件选项
          }),
        );
      }
    },
  }
}

RSDOCTOR在执行构建时，增加变量开启构建分析。RSDOCTOR=true npm run build

最近在升级旧项目，会写一篇记录文章，编译打包速度至少提升了 60% 👍 ，还在调整中。

rspack 使用构建vue3脚手架

基本使用

配置对`vue3`的支持

配置`less-loader`

支持`JSX`

其他配置项

全量导入`element-plus`样式时，编译报错

`resolve.alias` 定义路径别名

升级到了`rspack@0.5`,需要单独安装`@rspack/core`

`rsbuild` 基于 rspack 的构建工具

`npm create rsbuild@latest` 按照提示

`npx rsbuild inspect` 查看默认的配置

`rsdoctor` 构建分析工具

网站公告

今日签到

热门文章

最新发布

rspack 使用构建vue3脚手架

基本使用

配置对vue3的支持

配置less-loader

支持JSX

其他配置项

全量导入element-plus样式时，编译报错

resolve.alias 定义路径别名

升级到了rspack@0.5,需要单独安装@rspack/core

rsbuild 基于 rspack 的构建工具

npm create rsbuild@latest 按照提示

npx rsbuild inspect 查看默认的配置

rsdoctor 构建分析工具

网站公告

今日签到

热门文章

最新发布

配置对`vue3`的支持

配置`less-loader`

支持`JSX`

全量导入`element-plus`样式时，编译报错

`resolve.alias` 定义路径别名

升级到了`rspack@0.5`,需要单独安装`@rspack/core`

`rsbuild` 基于 rspack 的构建工具

`npm create rsbuild@latest` 按照提示

`npx rsbuild inspect` 查看默认的配置

`rsdoctor` 构建分析工具