如何在angular7中导出多个配置自定义webpack

Question

我将在当前禁用ng弹出的情况下将角度代码运行到单独的线程中，是否可以使用@ angular-builders / custom-webpack和@ angular-builders / dev-server

我正在此article之后在Medium

上实现它

我使用以下代码更改了src / app / app.module.ts

setIntent(intent)

我用以下代码更改了src / main.ts：

import { WorkerAppModule, WORKER_APP_LOCATION_PROVIDERS } from '@angular/platform-webworker';
import { NgModule } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common'

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    WorkerAppModule 
  ],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '/'
    },
    WORKER_APP_LOCATION_PROVIDERS
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我已经创建了src / workerLoader.ts

import { enableProdMode } from '@angular/core';
import { bootstrapWorkerUi, WORKER_UI_LOCATION_PROVIDERS } from '@angular/platform-webworker';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

bootstrapWorkerUi('webworker.bundle.js', WORKER_UI_LOCATION_PROVIDERS);

我已按以下方式配置angular.json

import './polyfills.ts';
import '@angular/core';
import '@angular/common';

import { platformWorkerAppDynamic } from '@angular/platform-webworker-dynamic';
import { AppModule } from './app/app.module';

platformWorkerAppDynamic().bootstrapModule(AppModule);

我也创建了extra-webpack.config.js，但这是问题所在，我想导出多个配置，其中一个目标为“ web”，另一个目标为“ webworker”，我正在按照webpack网站中的文档进行操作使用 multiple targets，但是使用ng serve时出现错误“无效的配置对象”，请在此处查看错误enter image description here

//... some stuff...
"build": {
          "builder": "angular-cli-builders:custom-webpack-browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "replaceDuplicatePlugins":true,
              "mergeStrategies": {
                "entry": "replace",
                "output": "replace",
                "optimization":"replace"
              }
            },
            //... some stuff...
"serve": {
          "builder": "angular-cli-builders:generic-dev-server",
          "options": {
            "browserTarget": "myWorkerApp:build"
          },
//... some stuff...

看起来我将使用相同的代码执行多个配置，但目标是不同的属性，但是如果我使用像这样的singel配置

const AotPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];

const webworkerConfig =  {

    "target":"webworker",

    "entry": {
        "main": [
            "./src/main.ts"
        ],
        "polyfills": [
            "./src/polyfills.ts"
        ],
        "styles": [
            "./src/styles.scss"
        ],
        "webworker": [
            "./src/workerLoader.ts"
        ]
    },
    "output": {
        "path": path.join(process.cwd(), "dist"),
        "publicPath": '/',
        "filename": "[name].bundle.js",
        "chunkFilename": "[id].chunk.js",
        "globalObject": typeof self === 'undefined' ? "this" : "self",
    },
    "plugins": [
        new HtmlWebpackPlugin({
            "template": "./src/index.html",
            "filename": "./index.html",
            "excludeChunks": [
                "webworker"
            ],
            "chunksSortMode": function sort(left, right) {
                var leftIndex = entryPoints.indexOf(left.names[0]);
                var rightIndex = entryPoints.indexOf(right.names[0]);
                if (leftIndex > rightIndex) {
                    return 1;
                }
                else if (leftIndex < rightIndex) {
                    return -1;
                }
                else {
                    return 0;
                }
            }
        }),
        new AotPlugin({
            "mainPath": "./main.ts",
            "entryModule": 'src/app/app.module#AppModule',
            "exclude": [],
            "tsConfigPath": "./src/tsconfig.app.json",
            "skipCodeGeneration": true

        })
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: 'vendor',
                    test: /\/node_modules\//,
                    chunks: 'all',
                    priority: 0,
                    enforce: true
                }
            }
        }
    },
};

const webConfig =  {

    "target":"web",

    "entry": {
        "main": [
            "./src/main.ts"
        ],
        "polyfills": [
            "./src/polyfills.ts"
        ],
        "styles": [
            "./src/styles.scss"
        ],
        "webworker": [
            "./src/workerLoader.ts"
        ]
    },
    "output": {
        "path": path.join(process.cwd(), "dist"),
        "publicPath": '/',
        "filename": "[name].bundle.js",
        "chunkFilename": "[id].chunk.js",
        "globalObject": typeof self === 'undefined' ? "this" : "self",
    },
    "plugins": [
        new HtmlWebpackPlugin({
            "template": "./src/index.html",
            "filename": "./index.html",
            "excludeChunks": [],
            "chunksSortMode": function sort(left, right) {
                var leftIndex = entryPoints.indexOf(left.names[0]);
                var rightIndex = entryPoints.indexOf(right.names[0]);
                if (leftIndex > rightIndex) {
                    return 1;
                }
                else if (leftIndex < rightIndex) {
                    return -1;
                }
                else {
                    return 0;
                }
            }
        }),
        new AotPlugin({
            "mainPath": "./main.ts",
            "entryModule": 'src/app/app.module#AppModule',
            "exclude": [],
            "tsConfigPath": "./src/tsconfig.app.json",
            "skipCodeGeneration": true

        })
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: 'vendor',
                    test: /\/node_modules\//,
                    chunks: 'all',
                    priority: 0,
                    enforce: true
                }
            }
        }
    },
};

module.exports = [webworkerConfig , webConfig];

webpack编译成功，但是如果使用此配置将目标设置为“ webworker”，则会出现错误“未定义文档”

module.exports =  webConfig;

我有一个错误“未定义窗口”，因为它仅在Webworker中使用

为什么使用多个配置时会出现此错误以及如何解决此错误？

我正在使用webpack：“ 4.29.6”角度：“ 7.2.9”