如何在 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 包。

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

如果使用 Angular 版本 <8, also install:

$ 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 一起使用，ngserve 将使用后者提供的自定义配置运行。

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

接下来，在选项对象下，添加“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"
            },

接下来，对于 Angular 版本 <8, change the builder property under the serve property to @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"
          },

对于 Angular 8+，将serve属性下的builder属性更改为@angular-builders/custom-webpack:dev-server:

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

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

您可以在这里找到带有实际示例的教程

Answer 2

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

Answer 3

如有疑问请参考

从 npm 输入 ORM：

$ 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 一起使用，ngserve 将使用后者提供的自定义配置运行。

现在，打开

angular.json

文件，找到

projects -> app -> architect -> build -> builder

条目并将 @angular-devkit/build-angular:browser 与

@angular-builders/custom-webpack:browser.

交换

接下来，在选项对象下，添加

"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 配置，并且您应该看到终端中显示“使用自定义配置”消息。