使用 Webpack 将项目转换为 Quasar CLI

Quasar CLI with Webpack - @quasar/app-webpack

本页将指导你如何将 Quasar CLI 与 Vite（@quasar/app-vite v2）项目转换为 Quasar CLI 与 Webpack one（@quasar/app-webpack v4）。

¥This page will guide you on how to convert a Quasar CLI with Vite (@quasar/app-vite v2) project into a Quasar CLI with Webpack one (@quasar/app-webpack v4).

步骤 1:编辑 package.json(Step 1: Edit package.json)

¥Step 1: Edit package.json

dependencies: {
+ "core-js": "^3.6.5",
},

devDependencies: {
- "@quasar/app-vite": "^2.0.0"
+ "@quasar/app-webpack": "^4.0.0"

+ "eslint-webpack-plugin": "^4.0.1",
+ "ts-loader": "^9.4.2", // if using TS

- "postcss"
- "postcss-rtlcss"

// if you have PWA mode:
+ "workbox-webpack-plugin": "^7.0.0"
- "workbox-build": "^7.0.0",
- "workbox-cacheable-response": "^7.0.0",
- "workbox-core": "^7.0.0",
- "workbox-expiration": "^7.0.0",
- "workbox-precaching": "^7.0.0",
- "workbox-routing": "^7.0.0",
- "workbox-strategies": "^7.0.0"
}

+ "browserslist": [
+   "last 10 Chrome versions",
+   "last 10 Firefox versions",
+   "last 4 Edge versions",
+   "last 7 Safari versions",
+   "last 8 Android versions",
+   "last 8 ChromeAndroid versions",
+   "last 8 FirefoxAndroid versions",
+   "last 10 iOS versions",
+   "last 5 Opera versions"
+ ],

记得安装 yarn/npm/pnpm/bun。

¥Remember to yarn/npm/pnpm/bun install.

Quasar CLI 与 Webpack 项目依赖 /package.json > browserslist 来指定你正在使用的浏览器定位。更多信息：浏览器兼容性页。

¥A Quasar CLI with Webpack project relies on /package.json > browserslist to specify which browsers you are targeting. More info: Browser Compatibility page.

步骤 2:各种文件(Step 2: Various files)

¥Step 2: Various files

创建 /babel.config.js：

¥Create /babel.config.js:

export default api => {
  return {
    presets: [
      [
        '@quasar/babel-preset-app',
        api.caller(caller => caller && caller.target === 'node')
          ? { targets: { node: 'current' } }
          : {}
      ]
    ]
  }
}

如果你使用 RTL 支持，请编辑 /postcss.config.js。你需要删除 postcss-rtlcss 的导入和使用。Quasar CLI 现在会自动处理此操作：
¥If you are using the RTL support, then edit /postcss.config.js. You will need to remove the postcss-rtlcss import and usage. This is handled automatically by Quasar CLI now:
/postcss.config.js
```
- import rtlcss from 'postcss-rtlcss'

export default {
  plugins: [
-   rtlcss()
  ]
}
```
Copied to clipboard
此外，请卸载 postcss-rtlcss 包。
¥Also, uninstall the postcss-rtlcss package.

步骤 3:复制原始文件夹中的文件夹(Step 3: Copy folders from original folder)

¥Step 3: Copy folders from original folder

从你的原始项目文件夹中，按原样复制以下内容：

¥From your original project folder, copy these as they are:

/src
/src-cordova
/src-capacitor
/src-electron
/src-pwa
/src-ssr（有一点小警告；请参阅后续步骤）
¥/src-ssr (with small caveat; see next steps)
/src-bex（有一点小警告；请参阅后续步骤）
¥/src-bex (with small caveat; see next steps)

步骤 4:检查新的 quasar.config 文件(Step 4: Check the new quasar.config file)

¥Step 4: Check the new quasar.config file

以下属性在 quasar.config 文件页面中有详细说明。

¥The following props are detailed in the quasar.config file page.

+ eslint: {
+   // fix: true,
+   // include: [],
+   // exclude: [],
+   // cache: false,
+   // rawEsbuildEslintOptions: {},
+   // rawWebpackEslintPluginOptions: {},
+   warnings: true,
+   errors: true
+ },

build: {
- target: {
+ esbuildTarget: {
    browser: [ 'es2022', 'firefox115', 'chrome115', 'safari14' ],
    node: 'node20'
  },

+ webpackTranspile
+ webpackTranspileDependencies
+ webpackDevtool

+ htmlFilename
+ rtl
+ showProgress
+ gzip
+ vueCompiler

- extendViteConf (viteConf, { isServer, isClient }) {}
+ extendWebpack () {}
+ chainWebpack () {}

- viteVuePluginOptions
- vitePlugins

- useFilenameHashes
- polyfillModulePreload

+ uglifyOptions
+ scssLoaderOptions
+ sassLoaderOptions
+ stylusLoaderOptions
+ lessLoaderOptions
+ vueLoaderOptions
+ tsLoaderOptions
},

devServer: {
+ server: {
+  type: 'http'
+ }
},

sourceFiles: {
+ indexHtmlTemplate: 'index.html'
}

¥Step 5: SSR related

export const renderPreloadTag = defineSsrRenderPreloadTag((file/* , { ssrContext } */) => {
  if (jsRE.test(file) === true) {
-   return `<link rel="modulepreload" href="${file}" crossorigin>`;
+   return `<script src="${file}" defer crossorigin></script>`;
  }

¥Step 6: BEX related

- declare module '@quasar/app-vite' {
+ declare module '@quasar/app-webpack' {
  interface BexEventMap {
    // ...
  }
}

// for ALL content script files:

- declare module '@quasar/app-vite' {
+ declare module '@quasar/app-webpack' {
  interface BexEventMap {
    // ...
  }
}

步骤 7:Linting(Step 7: Linting)

¥Step 7: Linting

如果你使用的是 ESLint，你可能需要检查此处的要求。

¥If you are using ESLint, you might want to check the requirements for it here.

步骤 8:大功告成(Step 8: And we’re done)

¥Step 8: And we’re done

$ quasar prepare
$ quasar dev
$ quasar build

1. Introduction

1.1. 步骤 1:编辑 package.json(Step 1: Edit package.json)

1.2. 步骤 2:各种文件(Step 2: Various files)

1.3. 步骤 3:复制原始文件夹中的文件夹(Step 3: Copy folders from original folder)

1.4. 步骤 4:检查新的 quasar.config 文件(Step 4: Check the new quasar.config file)

1.7. 步骤 7:Linting(Step 7: Linting)

1.8. 步骤 8:大功告成(Step 8: And we’re done)