Chain Webpack

本指南适用于你需要确保 Webpack 加载器已链接到托管应用中的情况，因为你自己的应用扩展需要它才能正常工作。我们假设将为 @quasar/app-webpack 发布此应用扩展，因为它对 @quasar/app-vite（完全不使用 Webpack）没有意义。

¥This guide is for when you want to ensure that a Webpack Loader is chained into the hosting app, because you depend on it for your own App Extension to work. We are assuming we will release this App Extension for @quasar/app-webpack, as it does not makes sense for @quasar/app-vite (which does not uses Webpack at all).

提示

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

¥In order for creating an App Extension project folder, please first read the Development Guide > Introduction.

完整示例

要查看我们将要构建的示例，请前往完整示例，这是包含此应用扩展程序的 GitHub 仓库。

¥To see an example of what we will build, head over to full example, which is a GitHub repo with this App Extension.

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

¥We will only need the /index.js script for this, because we can use the Index API to configure the quasar.config file from the host app to include our Webpack chaining.

package.json

src/

index.js

# Described in Index API

/index.js 如下所示：

¥And /index.js would look like this:

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')

  // chain webpack
  api.chainWebpack((chain) => chainWebpack(api.ctx, chain))
}

我们的 “chainWebpack” 方法，与上述文件位于同一文件中：

¥Our “chainWebpack” method, in the same file as above:

import MarkdownIt from 'markdown-it'

const md = new MarkdownIt()

const chainWebpack = (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>`
      }
    })
}