构建系统使用 Webpack 来创建您的网站/应用程序。如果您不熟悉 Webpack，请不要担心。开箱即用，您无需配置它，因为它已经设置了所有内容。
与 quasar.config 文件一起使用
如果您需要调整默认的 Webpack 配置，可以通过编辑 /quasar.config 文件并配置 build > extendWebpack (cfg) 方法或 build > chainWebpack (chain) 来实现。
将 ESLint 加载程序添加到 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 messageWebpack 别名
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 删除了 Web 客户端构建的 Node.js polyfills。如果您正在为 Web 客户端使用依赖 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 加载程序
构建系统使用 Webpack，因此它依赖于使用 webpack 加载程序来处理不同类型的文件（js、css、styl、scss、json 等）。默认情况下，最常用的加载程序默认情况下都会提供。
安装加载程序
让我们举个例子。您希望能够导入 .json 文件。开箱即用，Quasar 提供了 json 支持，因此您实际上不需要执行以下步骤，但为了演示如何添加加载程序，我们将假装 Quasar 没有提供它。
因此，您需要一个加载程序。您搜索 Google 以查看您需要哪个 webpack 加载程序。在本例中，它是“json-loader”。我们首先安装它
$ yarn add --dev json-loader安装新的加载程序后，我们需要告诉 Webpack 使用它。因此，我们编辑 /quasar.config 文件并将 build.extendWebpack() 更改为在 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 传递，因此您不需要为它使用特定的加载程序。
默认情况下，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，那么您需要 EITHER 禁用 ESLint OR 告诉 ESLint 哪些 Vue 组件正在使用 Coffeescript。
请注意，vue-loader 使用 lang="coffee" 来识别使用 Coffeescript 的组件，但 lang="coffee" 对 ESLint 来说是不可识别的。幸运的是，ESLint（遵循传统的 HTML）使用 type="xxx" 来识别脚本类型。只要 <script> 标签的任何 type 不为 javascript，ESLint 就会将脚本标记为非 javascript，并跳过对其进行 lint。Coffeescript 的约定是使用 type="text/coffeescript" 来识别自己。因此，在使用 Coffeescript 的 Vue 组件中，使用 lang 和 type 来避免 ESLint 警告
<template>
...
</template>
<script lang="coffee" type="text/coffeescript">
...
</script>