构建系统使用Webpack创建您的网站/应用程序。 如果您不熟悉Webpack，请不要担心。 因为它开箱即用。您无需对其进行配置，因为它已经设置了一切。

与quasar.config.js一起使用

对于需要调整默认Webpack配置的情况，可以通过编辑/quasar.config.js和配置build> extendWebpack(cfg) 方法或 build > chainWebpack (chain)来实现。

向Webpack添加ESLint加载器的例子（假设你已经安装了它）：

// quasar.config.js
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：

// quasar.config.js
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配置

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将解析为正确的路径。

另外，如果您配置为使用Vue编译器版本（quasar.config.js > build > vueCompiler: true）进行构建，那么vue$会解析为vue/dist/vue.esm.js。

添加Webpack别名

要添加自己的别名，可以扩展webpack配置并将其与现有别名合并。 使用path.resolve辅助程序来解析目标别名的路径。

// quasar.config.js
const path = require('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()等效：

// quasar.config.js
const path = require('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。如果你在Web客户端上使用依赖Node.js API的包，你会得到一些包丢失的错误提示。例如。缓冲区"、“加密”、“os”、“path”、“stream”、“assert”。

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

// quasar.config.js
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不提供它。

所以，你需要一个装载机。 你搜索谷歌，看看你需要什么样的webpack loader。 在这种情况下，它是“json-loader”。 我们先安装它：

$ yarn add --dev json-loader

在安装新的加载器之后，我们想告诉Webpack使用它。 因此，我们编辑/quasar.config.js并更改build.extendWebpack()为这个新的加载器添加条目到module/rules：

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

与chainWebpack()等效:

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

然后你就完成了。

PostCSS

*.vue文件（以及所有其他样式文件）中的样式默认通过PostCSS传送，因此您不需要使用特定的装载器。

默认情况下，PostCSS配置为使用Autoprefixer。看看`/.postcssrc.js’，你可以在那里调整它，如果你需要的话

Pug

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

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

然后，您需要通过quasar.config.js扩展webpack配置：

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

与chainWebpack()等效:

// quasar.config.js
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，并跳过它。 Coffeescript的约定是使用type=“text/coffeescript”来标识自己。因此，在使用Coffeescript的Vue组件中，同时使用lang和type来避免ESLint警告：

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