Quasar CLI with Webpack - @quasar/app-webpack
Webpack处理

构建系统使用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')
  }
}

TIP

方法chainWebpack()提供webpack-chain对象。 您可能需要查看其文档页面。

WARNING

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.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-pluginyarn 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组件中,同时使用langtype来避免ESLint警告:

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