如何在 Ionic 4 中使用自定义 webpack 配置

Question

如何扩展默认 Webpack 配置并使用自定义配置？

我正在尝试使用需要一些额外 webpack 配置的包，但我不知道该怎么做。从 Angular 6 开始，这样做就有点复杂了。谁知道怎么做？

我已经尝试过一些教程：

1. https://javascripttuts.com/using-a-custom-webpack-configuration-in-an-ionic-4-application/
2. https://alligator.io/angular/custom-webpack-config/

这导致了我

@angular-builders/dev-server:generic

和

@angular-builders/custom-webpack:browser

然而，每当我尝试构建、服务时，我都会遇到错误。

Schema validation failed with the following errors:
  Data path ".builders['browser']" should have required property 'class'.

Answer 1

您可以为 Ionic 4/Angular 创建自定义 webpack 配置，如下所示。

在项目的根目录中创建自定义 Webpack 配置文件：

$ touch custom.webpack.config.js 

打开custom.webpack.config.js文件并添加以下代码：

const webpack = require('webpack');
console.log('The custom config is used');

接下来，返回您的终端并从 npm 安装 @angular-builders/custom-webpack 和 @angular-builders/dev-server 软件包：

$ npm install --save @angular-builders/custom-webpack
$ npm install --save @angular-builders/dev-server

@angular-devkit/build-angular:dev-server 构建器使用自定义 webpack 构建器来获取 webpack 配置。

与默认的@angular-devkit/build-angular:dev-server 不同，它不使用@angular-devkit/build-angular:browser 配置来运行开发服务器。如果你使用@angular-builders/dev-server:generic 和@angular-builders/custom-webpack:browser，ng serve 将使用后者提供的自定义配置运行。

现在，打开 angular.json 文件，找到项目 -> 应用程序 -> 架构师 -> 构建 -> 构建器条目并将 @angular-devkit/build-angular:browser 与 @angular-builders/custom-webpack 交换：浏览器。

接下来，在选项对象下，添加 "customWebpackConfig": {"path": "./custom.webpack.config.js"}:

  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom.webpack.config.js"
            },

接下来，将serve属性下的builder属性改为@angular-builders/dev-server:generic:

  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {},
        "serve": {
          "builder": "@angular-builders/dev-server:generic",
          "options": {
            "browserTarget": "app:build"
          },

现在，如果您再次为您的应用程序提供服务，将使用自定义 Webpack 配置，您应该会在终端中看到“使用自定义配置”消息。

您可以找到tutorial with a practical example here

Answer 2

我没有足够的代表来评论，如果你添加你的 package.json 和 angular.json 代码会更好。尝试将你的“@angular-devkit/build-angular”包降级到 ^0.12.X，如果您正在运行“@angular-builders/custom-webpack”的 v6。

Answer 3

Refer if you got doubt

来自 npm 的 TypeORM：

$ cd ionic-crm
$ npm install typeorm --save

在撰写本文时，typeorm v0.2.16 将被安装。

接下来，安装Node.js 类型：

$ npm install @types/node --save-dev

由于我们将在浏览器中进行测试，我们还需要安装sql.js：

$ npm install sql.js --save

在撰写本文时，sql.js v0.5.0 将被安装。

接下来，打开tsconfig.json 文件并在compilerOptions 下添加"typeRoots": ["node_modules/@types"]（如果它还没有的话）。

接下来，打开 src/tsconfig.app.json 并进行相应更改：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["node"],
    "paths": {
      "typeorm": ["node_modules/typeorm/browser"]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

添加自定义 Webpack 配置 接下来，在项目的根目录中创建一个自定义 Webpack 配置文件：

$ touch custom.webpack.config.js 

打开custom.webpack.config.js文件并添加以下代码：

const webpack = require('webpack');
console.log('The custom config is used');
module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            'window.SQL': 'sql.js/js/sql.js'
        }),
        new webpack.NormalModuleReplacementPlugin(/typeorm$/, function (result) {
            result.request = result.request.replace(/typeorm/, "typeorm/browser");
        })
    ],
    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    },
    optimization: {
        minimize: false
    }
};

接下来，回到你的终端并从 npm 安装 @angular-builders/custom-webpack 和 @angular-builders/dev-server 包：

$ npm install --save @angular-builders/custom-webpack
$ npm install --save @angular-builders/dev-server

@angular-builders/custom-webpack v7.4.3 和 *@angular-builders/dev-server v7.3.1 * 软件包将被安装。

@angular-devkit/build-angular:dev-server 构建器使用自定义 webpack 构建器来获取 webpack 配置。与默认的 @angular-devkit/build-angular:dev-server 不同，它不使用@angular-devkit/build-angular:browser 配置来运行开发服务器。如果你使用@angular-builders/dev-server:generic 和@angular-builders/custom-webpack:browser，ng serve 将使用后者提供的自定义配置运行。

现在，打开angular.json 文件，找到projects -> app -> architect -> build -> builder 条目并将@angular-devkit/build-angular:browser 与@angular-builders/custom-webpack:browser. 交换

接下来，在options对象下，添加

"customWebpackConfig": {"path": "./custom.webpack.config.js"}:

  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom.webpack.config.js"
            },

接下来，将serve属性下的builder属性改为@angular-builders/dev-server:generic:

 "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {},
        "serve": {
          "builder": "@angular-builders/dev-server:generic",
          "options": {
            "browserTarget": "app:build"
          },

现在，如果您再次为您的应用程序提供服务，将使用自定义 Webpack 配置，您应该会在终端中看到“使用自定义配置”消息。