链式 Webpack

本指南适用于您希望确保将Webpack Loader链接到宿主应用程序的情况，因为您的 App Extension 依赖它才能工作。我们假设我们将为@quasar/app-webpack发布此 App Extension，因为对于@quasar/app-vite（根本不使用 Webpack）来说，这样做没有意义。

提示

为了创建 App Extension 项目文件夹，请首先阅读开发指南 > 简介。

完整示例

要查看我们将构建内容的示例，请访问完整示例，这是一个包含此 App Extension 的 GitHub 仓库。

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

package.json

src/

index.js

# 在 Index API 中描述

并且 /index.js 将如下所示

export default function (api) {
  // (Optional!)
  // Quasar compatibility check; you may need
  // hard dependencies, as in a minimum version of the "quasar"
  // package or a minimum version of Quasar App CLI
  api.compatibleWith('quasar', '^2.0.0')
  api.compatibleWith('@quasar/app-webpack', '^4.0.0-beta.1')

  // chain 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) {
        // use markdown-it to render the markdown file to html, then
        // surround the output of that that with Vue template syntax
        // so it can be processed by the 'vue-loader'
        return `<template><div>${md.render(source)}</div></template>`
      }
    })
}

发现错误？在浏览器中编辑此页面