这份指南演示如何在应用扩展中使用链式 Webpack 扩展宿主应用的 Webpack Loader。
我们假设将为 @quasar/app-webpack 发布此 App Extension，因为对于不使用 Webpack 的 @quasar/app-vite 来说，这没有意义。
TIP
为了创建一个 App Extension 项目文件夹，请首先阅读 开发指南 > 介绍。
完整示例
要查看我们将构建的示例，请转到 完整示例，这是一个包含此 App Extension 的 GitHub 仓库。
我们只需要 /index.js 脚本，因为我们可以使用 Index API 来配置主机应用程序的 quasar.config 文件以包含我们的 Webpack 链接。
然后，/index.js 如下所示：
export default function (api) {
// （可选！）
// Quasar 兼容性检查；您可能需要
// 强硬的依赖，比如 "quasar" 包的最小版本
// 或 Quasar App CLI 的最小版本
api.compatibleWith("quasar", "^2.0.0");
api.compatibleWith("@quasar/app-webpack", "^3.0.0");
// 链接 webpack
api.chainWebpack((chain) => chainWebpack(api.ctx, chain));
}content_paste
我们的 “chainWebpack” 方法在上面的同一文件中：
const MarkdownIt = require("markdown-it");
const md = new MarkdownIt();
const chainWebpack = function (ctx, chain) {
const rule = chain.module.rule("md").test(/\.md$/).pre();
rule
.use("v-loader")
.loader("vue-loader")
.options({
productionMode: ctx.prod,
transformAssetUrls: {
video: "src",
source: "src",
img: "src",
image: "xlink:href",
},
});
rule
.use("ware-loader")
.loader("ware-loader")
.options({
raw: true,
middleware: function (source) {
// 使用 markdown-it 将 markdown 文件渲染为 html，然后
// 将其输出用 Vue 模板语法包裹
// 以便它可以被 'vue-loader' 处理
return `<template><div>${md.render(source)}</div></template>`;
},
});
};content_paste