本指南适用于要确保将Webpack加载器链到宿主应用程序的情况，因为您需要依靠它才能运行自己的应用扩展。 我们假设我们将为@quasar/app-webpack发布这个应用扩展，因为它对@quasar/app-vite没有意义（它根本不使用Webpack）。

我们只需要/index.js脚本，因为我们可以使用索引API从宿主应用程序配置quasar.config.js来包含我们的Webpack链。

.
├── package.json
└── src
    └── index.js              # 在索引API中描述

/index.js看起来像这样：

// 文件: /index.js
module.exports = 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”方法：

// 文件: /index.js
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>`
      }
    })
}