Chain Webpack
这份指南演示如何在应用扩展中使用链式 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 链接。
./
package.json
src/
index.js
# Described in Index API
然后，/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))
}
我们的 “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>`
}
})
}