quasarframework/quasar @quasar/app-webpack-v4.0.0-beta.1

on GitHub

Important! There is an "Upgrade guide" page under the "Quasar CLI with Vite" menu section in the docs. Please read it top to bottom before proceeding with the upgrade.

Notable breaking changes

• Minimum Node.js version is now 16
• We have shifted towards an ESM style for the whole Quasar project folder, so many default project files now require ESM code (although using .cjs as an extension for these files is supported, but you will most likely need to rename the extension should you not wish to change anything). One example is the /quasar.config.js file which now it's assumed to be ESM too (so change from .js to .cjs should you still want a CommonJs file).
• Ported and adapted the superior devserver implementation from @quasar/app-vite for all Quasar modes. The benefits are huge.
• Ported the superior implementation of SSR, PWA, Electron & BEX modes from q/app-vite. We will detail each Quasar mode changes on this docs page.
  • SSR - some of the noticeable improvements:
    • Improved reliability: same server code runs in dev and prod
    • More target webserver options: you can replace express() with whatever else you are using
    • Perf: client-side code no longer re-compiles from scratch when changing code in /src-ssr
    • Faster & better compilation for files in /src-ssr (now built with Esbuild instead of Webpack)
  • PWA - some of the noticeable improvements:
    • Many new configuration options (while removing a lot of the old ones)
    • Faster & better compilation for files in /src-pwa (now built with Esbuild instead of Webpack)
  • Electron
    • Now compiles to ESM (thus also taking advantage of the Electron in ESM format)
    • Faster & better compilation for files in /src-electron (now built with Esbuild instead of Webpack)
    • Support for multiple preload scripts
  • BEX - some of the noticeable improvements:
    • Ported the superior implementation from q/app-vite, which also means that when you spawn the mode you can choose between extension Manifest v2 and Manifest v3
    • The manifest is now held in a file of its own (/src-pwa/manifest.json) instead of inside the /quasar.config file
• Webpack will now only compile the contents of /src folder, while the rest (/src-pwa, /src-electron, etc) are now handled by Esbuild. This translates to a superior build speed and handling of Node.js formats.
• The "test" cmd was removed due to latest updates for @quasar/testing-* packages. See here
• The "clean" cmd has been re-designed. Type "quasar clean -h" in your upgraded Quasar project folder for more info.
• Typescript detection is based on the quasar.config file being in TS form (quasar.config.ts) and tsconfig.json file presence.
• We will detail more breaking changes for each of the Quasar modes in the docs. There is an "Upgrade guide" page under the "Quasar CLI with Vite" menu section.

Highlights on what's new

Some of the work below has already been backported to the old q/app-webpack v3, but posting here for reader's awareness.

• feat(app-webpack): ability to run multiple quasar dev/build commands simultaneously (example: can run "quasar dev -m capacitor" and "quasar dev -m ssr" and "quasar dev -m capacitor -T ios" simultaneously)
• feat(app-webpack): support for quasar.config file in multiple formats (.js, .mjs, .ts, .cjs)
• feat(app-webpack): Better TS typings overall
• feat(app-webpack): upgrade to Typescript v5; drop fork-ts-checker
• feat(app-webpack): Improve quasarConfOptions, generate types for it, improve docs (fix: #14069) (#15945)
• feat(app-webpack): reload app if one of the imports from quasar.config file changes
• feat(app-webpack): TS detection should keep account of quasar.config file format too (quasar.config.ts)
• feat(app-webpack): env dotfiles support #15303
• feat(app-webpack): New quasar.config file props: build > envFolder (string) and envFiles (string[])
• feat(app-webpack): support for postcss config file in multiple formats: postcss.config.cjs, .postcssrc.js, postcss.config.js, postcss.config.mjs, .postcssrc.cjs, .postcssrc.mjs
• feat(app-webpack): support for babel config file in multiple formats: babel.config.cjs, babel.config.js, babel.config.mjs, .babelrc.js, .babelrc.cjs, .babelrc.mjs, .babelrc
• feat(app-webpack): reopen browser (if configured so) when changing app url through quasar.config file
• feat(app-webpack): port quasar.config file > electron > inspectPort prop from q/app-vite
• feat(app-webpack): port quasar.config file > build > rawDefine from q/app-vite
• feat&perf(app-webpack): faster & more accurate algorithm for determining node package manager to use
• feat(app-webpack): highly improve SSR perf + mem usage (especially for prod); major refactoring of ssr-helpers; also include renderPreloadTag() from q/app-vite
• feat(app-webpack): support for SSR development with HTTPS
• feat(app-webpack): SSR - ability to replace express() with any other connect-like webserver
• feat(app-webpack): SSR - no longer recompile everything when changing code in /src-ssr
• feat(app-webpack): upgrade deps
• feat(app-webpack): remove workaround for bug in Electron 6-8 in cli templates (#15845)
• feat(app-webpack): remove bundleWebRuntime config for Capacitor v5+
• feat(app-webpack): use workbox v7 by default
• feat(app-webpack): quasar.config > build > htmlMinifyOptions
• feat+refactor(app-webpack): ability to run multiple modes + dev/build simultaneously
• feat(app-webpack): lookup open port for vue devtools when being used; ability to run multiple cli instances with vue devtools
• perf(app-webpack): only verify quasar.conf server address for "dev" cmd
• feat(app-webpack): pick new electron inspect port for each instance
• refactor(app-webpack): AE support - better and more efficient algorithms
• feat(app-webpack): AE support for ESM format
• feat(app-webpack): AE support for TS format (through a build step)
• feat(app-webpack): AE API new methods -> hasTypescript() / hasLint() / getStorePackageName() / getNodePackagerName()
• feat(app-webpack): AE -> Prompts API (and ability for prompts default exported fn to be async)
• feat(app-webpack): smarter app files validation
• refactor(app-webpack): the "clean" cmd now works different, since the CLI can be run in multiple instances on the same project folder (multiple modes on dev or build)
• feat(app-webpack): Support for Bun as package manager #16335
• feat(app-webpack): for default /src-ssr template -> prod ssr -> on error, print err stack if built with debugging enabled
• fix(app-webpack): electron preload script triggering "module not found"

Env dotfiles support

Expanding a bit on the env dotfiles support. These files will be detected and used (the order matters):

.env                                # loaded in all cases
.env.local                          # loaded in all cases, ignored by git
.env.[dev|prod]                     # loaded for dev or prod only
.env.local.[dev|prod]               # loaded for dev or prod only, ignored by git
.env.[quasarMode]                   # loaded for specific Quasar CLI mode only
.env.local.[quasarMode]             # loaded for specific Quasar CLI mode only, ignored by git
.env.[dev|prod].[quasarMode]        # loaded for specific Quasar CLI mode and dev|prod only
.env.local.[dev|prod].[quasarMode]  # loaded for specific Quasar CLI mode and dev|prod only, ignored by git

...where "ignored by git" assumes a default project folder created after releasing this package, otherwise add .env.local* to your /.gitignore file.

You can also configure the files above to be picked up from a different folder or even add more files to the list:

// quasar.config file

build: {
  envFolder: '../' // absolute or relative path to root project folder
  envFiles: [
    // Path strings to your custom files --- absolute or relative path to root project folder
  ]
}

Donations

Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers. If you are interested in supporting this project, please consider the following:

• Becoming a sponsor on Github
• One-off donation via PayPal