鏈式 Webpack

本指南適用於當您想要確保 Webpack Loader 被鏈入託管應用程式時，因為您的 App Extension 依賴它才能運作。我們假設我們將為 @quasar/app-webpack 發佈此 App Extension，因為它對於 @quasar/app-vite (完全不使用 Webpack) 沒有意義。

提示

為了建立 App Extension 專案資料夾，請先閱讀開發指南 > 簡介。

完整範例

若要查看我們將建置的範例，請前往完整範例，這是一個包含此 App Extension 的 GitHub 儲存庫。

我們只需要 /index.js 腳本，因為我們可以使用索引 API來設定主應用程式中的 quasar.config 檔案，以包含我們的 Webpack 鏈。

package.json

src/

index.js

# 在索引 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>`
      }
    })
}

發現錯誤？在瀏覽器中編輯此頁面