构建系统使用 Webpack 创建你的网站/应用。如果你不熟悉 Webpack，也不用担心。开箱即用，你无需进行任何配置，因为它已经设置好了一切。

¥The build system uses Webpack to create your website/app. Don’t worry if you aren’t acquainted with Webpack. Out of the box, you won’t need to configure it because it already has everything set up.

quasar.config 文件的使用(Usage with quasar.config file)

¥Usage with quasar.config file

如果你需要调整默认的 Webpack 配置，可以通过编辑 /quasar.config 文件并配置 build > extendWebpack (cfg) 方法或 build > chainWebpack (chain) 来实现。

¥For cases where you need to tweak the default Webpack config you can do so by editing the /quasar.config file and configuring build > extendWebpack (cfg) method or build > chainWebpack (chain).

向 Webpack 添加 ESLint 加载器的示例（假设你已安装）：

¥Example of adding ESLint loader to Webpack (assuming you’ve installed it):

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 配置对象。你可以添加/删除/替换其中的任何内容，前提是你确实知道自己在做什么。

¥Notice that you don’t need to return anything. The parameter of extendWebpack(cfg) is the Webpack configuration Object generated by Quasar for you. You can add/remove/replace anything from it, assuming you really know what you are doing.

chainWebpack() 对应的 quasar.conf：

¥Equivalent quasar.conf for chainWebpack():

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

检查 Webpack 配置(Inspecting Webpack Config)

¥Inspecting Webpack Config

Quasar CLI 为此提供了一个实用的命令：

¥Quasar CLI offers a useful command for this:

$ quasar inspect -h

  Description
    Inspect Quasar generated Webpack/Esbuild config

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

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

Webpack 别名(Webpack Aliases)

¥Webpack Aliases

Quasar 预配置了许多实用的 Webpack 别名。你可以在项目中的任何地方使用它们，Webpack 会解析正确的路径。

¥Quasar comes with a bunch of useful Webpack aliases preconfigured. You can use them anywhere in your project and webpack will resolve the correct path.

此外，如果你配置使用 Vue 编译器版本进行构建（quasar.config 文件 > build > vueCompiler: true），vue$ 将解析为 vue/dist/vue.esm.js。

¥Also if you configure to build with the Vue compiler version (quasar.config file > build > vueCompiler: true), vue$ resolves to vue/dist/vue.esm.js.

添加 Webpack 别名(Adding Webpack aliases)

¥Adding Webpack aliases

要添加你自己的别名，你可以扩展 webpack 配置并将其与现有别名合并。始终使用绝对路径。

¥To add your own alias you can extend the webpack config and merge it with the existing alias. Always use absolute paths.

import { defineConfig } from '#q-app/wrappers'
import { fileURLToPath } from 'node:url'

export default defineConfig((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: fileURLToPath(new URL('./src/somefolder', import.meta.url)),
        }
      }
    }
  }
})

chainWebpack() 对应的 quasar.conf：

¥Equivalent with chainWebpack():

import { defineConfig } from '#q-app/wrappers'
import { fileURLToPath } from 'node:url'

export default defineConfig((ctx) => {
  return {
    build: {
      chainWebpack (chain, { isServer, isClient }) {
        chain.resolve.alias
          .set('myalias', fileURLToPath(new URL('./src/somefolder', import.meta.url)))
      }
    }
  }
})

Webpack v5 兼容性问题(Webpack v5 compatibility issues)

¥Webpack v5 compatibility issues

Quasar App CLI 使用 Webpack v5。如果你将现有项目从 Webpack v4 项目迁移到 Quasar，你可能会遇到一些与第三方库的兼容性问题。Webpack v5 删除了 Web 客户端构建所需的 Node.js polyfill。如果你使用的 Web 客户端软件包依赖于 Node.js API，则会收到错误消息，提示缺少某些软件包。示例：Buffer, crypto, os, path, stream, assert.

¥Quasar App CLI is using Webpack v5. If you are moving your existing project to Quasar from a Webpack v4 project, you might have some compatibility issues with 3rd party libraries. Webpack v5 removed the Node.js polyfills for the web client builds. If you are using packages for the web client that rely on Node.js API, you will get errors saying that some packages are missing. Examples: Buffer, crypto, os, path, stream, assert.

这些问题需要由软件包所有者解决。如果你不想等待，只想运行你的应用/网站（有一点风险），那么你可以手动安装 node-polyfill-webpack-plugin（yarn add --dev node-polyfill-webpack-plugin）并在 quasar.config file > build > chainWebpack 中引用它。示例：

¥These need to be addressed by the package owners. But if you prefer not to wait and just want to run your app/website (with a bit of risk), then you can manually install node-polyfill-webpack-plugin (yarn add --dev node-polyfill-webpack-plugin) and reference it in quasar.config file > build > chainWebpack. Example:

const nodePolyfillWebpackPlugin from 'node-polyfill-webpack-plugin'

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

Webpack 加载器(Webpack loaders)

¥Webpack loaders

构建系统使用 Webpack，因此它依赖于使用 Webpack 加载器来处理不同类型的文件（js、css、styl、scss、json 等等）。默认情况下，默认提供最常用的加载器。

¥The build system uses Webpack, so it relies on using webpack loaders to handle different types of files (js, css, styl, scss, json, and so on). By default, the most used loaders are provided by default.

安装加载器(Installing loaders)

¥Installing loaders

我们举个例子。你希望能够导入 .json 文件。Quasar 开箱即用地提供 JSON 支持，因此你实际上不需要遵循以下步骤，但为了演示如何添加加载器，我们假设 Quasar 不提供此功能。

¥Let’s take an example. You want to be able to import .json files. Out of the box, Quasar supplies json support so you don’t actually need to follow these steps, but for the sake of demonstrating how to add a loader, we’ll pretend Quasar doesn’t offer it.

所以，你需要一个加载器。你在 Google 上搜索你需要的 Webpack 加载器。在这种情况下，它是 “json-loader”。我们首先安装它：

¥So, you need a loader for it. You search Google to see what webpack loader you need. In this case, it’s “json-loader”. We first install it:

$ yarn add --dev json-loader

安装新的加载器后，我们需要告诉 Webpack 使用它。所以我们编辑 /quasar.config 文件，并将 build.extendWebpack() 更改为向 module/rules 添加此新加载器的条目：

¥After installing your new loader, we want to tell Webpack to use it. So we edit the /quasar.config file and change build.extendWebpack() to add entries to module/rules for this new loader:

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

chainWebpack() 对应的 quasar.conf：

¥Equivalent with chainWebpack():

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

完成。

¥And you’re done.

PostCSS(PostCSS)

*.vue 文件（以及所有其他样式文件）中的样式默认通过 PostCSS 管道传输，因此你无需为其使用特定的加载器。

¥Styles in *.vue files (and all other style files) are piped through PostCSS by default, so you don’t need to use a specific loader for it.

默认情况下，PostCSS 配置为使用 Autoprefixer。查看 /postcss.config.cjs，如果需要，你可以进行调整。

¥By default, PostCSS is configured to use Autoprefixer. Take a look at /postcss.config.cjs where you can tweak it if you need to.

Pug(Pug)

首先，你需要安装一些依赖：

¥First, you need to install some dependencies:

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

然后你需要通过 /quasar.config 文件扩展 webpack 配置：

¥Then you need to extend the webpack configuration through the /quasar.config file:

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

chainWebpack() 对应的 quasar.conf：

¥Equivalent with chainWebpack():

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

Coffeescript(Coffeescript)

如果你正在使用 Coffeescript，那么你需要禁用 ESLint 或者告诉 ESLint 哪些 Vue 组件正在使用 Coffeescript。

¥If you are using Coffeescript then you need to EITHER disable ESLint OR tell ESLint which Vue components are using 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 警告：

¥Note that vue-loader uses lang="coffee" to identify components which are using Coffeescript, but lang="coffee" is not recognizable for ESLint. Fortunately, ESLint (following traditional HTML) uses type="xxx" to identify the type of scripts. As long as a <script> tag has any type other than javascript, ESLint would mark the script as non-javascript, and skips linting it. Coffeescript’s convention is to use type="text/coffeescript" to identify itself. Therefore, in your Vue components which are using Coffeescript, using both lang and type to avoid ESLint warnings:

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