Webpack 處理 | Quasar Framework

Quasar CLI 搭配 Webpack - @quasar/app-webpack

處理 Webpack

建置系統使用 Webpack 來建立您的網站/應用程式。如果您不熟悉 Webpack，請別擔心。開箱即用，您不需要設定它，因為它已經設定好一切。

搭配 quasar.config 檔案使用

如果您需要調整預設的 Webpack 設定，您可以編輯 /quasar.config 檔案，並設定 build > extendWebpack (cfg) 方法或 build > chainWebpack (chain)。

將 ESLint loader 新增到 Webpack 的範例 (假設您已安裝)

build: {
  extendWebpack (cfg, { isServer, isClient }) {
    cfg.module.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /(node_modules|quasar)/
    })
  }
}

請注意，您不需要傳回任何內容。extendWebpack(cfg) 的參數是 Quasar 為您產生的 Webpack 設定物件。您可以從中新增/移除/取代任何內容，前提是您真的知道自己在做什麼。

chainWebpack() 的等效 quasar.conf

build: {
  chainWebpack (chain, { isServer, isClient }) {
    chain.module.rule('eslint')
      .test(/\.(js|vue)$/)
      .enforce('pre')
      .exclude
        .add((/[\\/]node_modules[\\/]/))
        .end()
      .use('eslint-loader')
        .loader('eslint-loader')
  }
}

提示

chainWebpack() 方法提供一個 webpack-chain 物件。您可能需要查看其文件頁面。

警告

chainWebpack() 會在 extendWebpack() **之前** 執行。

以上兩個範例是等效的。請勿同時使用這兩種方法來篡改相同的內容！

檢查 Webpack 設定

Quasar CLI 提供一個有用的命令來執行此操作

$ quasar inspect -h

  Description
    Inspect Quasar generated Webpack config

  Usage
    $ quasar inspect
    $ quasar inspect -c build
    $ quasar inspect -m electron -p 'module.rules'

  Options
    --cmd, -c        Quasar command [dev|build] (default: dev)
    --mode, -m       App mode [spa|ssr|pwa|cordova|electron] (default: spa)
    --depth, -d      Number of levels deep (default: 5)
    --path, -p       Path of config in dot notation
                        Examples:
                          -p module.rules
                          -p plugins
    --help, -h       Displays this message

Webpack 別名

Quasar 預先設定了一堆有用的 Webpack 別名。您可以在專案中的任何位置使用它們，而 webpack 將解析正確的路徑。

別名	解析為
`src`	/src
`app`	/
`components`	/src/components
`layouts`	/src/layouts
`pages`	/src/pages
`assets`	/src/assets
`boot`	/src/boot
`stores`	/src/stores (Pinia stores)

此外，如果您設定使用 Vue 編譯器版本建置 (quasar.config 檔案 > build > vueCompiler: true)，則 vue$ 會解析為 vue/dist/vue.esm.js。

新增 Webpack 別名

若要新增您自己的別名，您可以擴充 webpack 設定並將其與現有的別名合併。使用 path.resolve 輔助程式來解析您預期別名的路徑。

const path = require('node:path')

module.exports = function (ctx) {
  return {
    build: {
      extendWebpack (cfg, { isServer, isClient }) {
        cfg.resolve.alias = {
          ...cfg.resolve.alias, // This adds the existing alias

          // Add your own alias like this
          myalias: path.resolve(__dirname, './src/somefolder'),
        }
      }
    }
  }
}

使用 chainWebpack() 的等效方法

const path = require('node:path')

module.exports = function (ctx) {
  return {
    build: {
      chainWebpack (chain, { isServer, isClient }) {
        chain.resolve.alias
          .set('myalias', path.resolve(__dirname, './src/somefolder'))
      }
    }
  }
}

Webpack v5 相容性問題

Quasar App CLI 正在使用 Webpack v5。如果您要將現有的專案從 Webpack v4 專案移轉到 Quasar，則可能會遇到與協力廠商程式庫的一些相容性問題。Webpack v5 移除了用於網頁用戶端建置的 Node.js polyfills。如果您使用的網頁用戶端套件依賴 Node.js API，則會收到錯誤訊息，指出某些套件遺失。範例：Buffer、crypto、os、path、stream、assert。

這些問題需要由套件擁有者解決。但是，如果您不想等待，只想執行您的應用程式/網站 (帶有一些風險)，則可以手動安裝 node-polyfill-webpack-plugin (yarn add --dev node-polyfill-webpack-plugin)，並在 quasar.config 檔案 > build > chainWebpack 中參考它。範例

build: {
  chainWebpack (chain) {
    const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
    chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin)
  }
}

Webpack loaders

建置系統使用 Webpack，因此它依賴使用 webpack loaders 來處理不同類型的檔案 (js、css、styl、scss、json 等等)。預設情況下，預設提供最常用的 loaders。

安裝 loaders

讓我們來看一個範例。您想要能夠匯入 .json 檔案。開箱即用，Quasar 提供 json 支援，因此您實際上不需要遵循這些步驟，但為了示範如何新增 loader，我們將假裝 Quasar 沒有提供。

因此，您需要一個 loader 來處理它。您在 Google 上搜尋以查看您需要的 webpack loader。在本例中，它是「json-loader」。我們先安裝它

$ yarn add --dev json-loader

安裝新的 loader 後，我們要告訴 Webpack 使用它。因此，我們編輯 /quasar.config 檔案，並變更 build.extendWebpack() 以將項目新增到此新 loader 的 module/rules

build: {
  extendWebpack (cfg) {
    cfg.module.rules.push({
      test: /\.json$/,
      loader: 'json-loader'
    })
  }
}

使用 chainWebpack() 的等效方法

build: {
  chainWebpack (chain) {
    chain.module.rule('json')
      .test(/\.json$/)
      .use('json-loader')
        .loader('json-loader')
  }
}

這樣就完成了。

PostCSS

*.vue 檔案 (和所有其他樣式檔案) 中的樣式預設會透過 PostCSS 傳輸，因此您不需要為其使用特定的 loader。

預設情況下，PostCSS 設定為使用 Autoprefixer。查看 /postcss.config.cjs，您可以在其中進行調整 (如果需要)。

Pug

首先，您需要安裝一些依賴項

$ yarn add --dev pug pug-plain-loader

然後，您需要透過 /quasar.config 檔案擴充 webpack 設定

build: {
  extendWebpack (cfg) {
    cfg.module.rules.push({
      test: /\.pug$/,
      loader: 'pug-plain-loader'
    })
  }
}

使用 chainWebpack() 的等效方法

build: {
  chainWebpack (chain) {
    chain.module.rule('pug')
      .test(/\.pug$/)
      .use('pug-plain-loader')
        .loader('pug-plain-loader')
  }
}

Coffeescript

如果您使用 Coffeescript，則您需要停用 ESLint 或告訴 ESLint 哪些 Vue 元件正在使用 Coffeescript。

請注意，vue-loader 使用 lang="coffee" 來識別正在使用 Coffeescript 的元件，但是 lang="coffee" 無法被 ESLint 識別。幸運的是，ESLint (遵循傳統 HTML) 使用 type="xxx" 來識別腳本的類型。只要 <script> 標籤具有任何非 javascript 的 type，ESLint 就會將腳本標記為非 javascript，並跳過對其進行 linting。Coffeescript 的慣例是使用 type="text/coffeescript" 來識別自身。因此，在您使用 Coffeescript 的 Vue 元件中，同時使用 lang 和 type 以避免 ESLint 警告

<template>
  ...
</template>
<script lang="coffee" type="text/coffeescript">
  ...
</script>

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

1. 簡介

2. 搭配 quasar.config 檔案使用

3. 檢查 Webpack 設定

4. Webpack 別名

4.1. 新增 Webpack 別名

5. Webpack v5 相容性問題

6. Webpack loaders

6.1. 安裝 loaders

6.2. PostCSS

6.3. Pug

6.4. Coffeescript