How to use the @aws-cdk/aws-cloudfront.CloudFrontWebDistribution function in @aws-cdk/aws-cloudfront

private addCloudfront() {
    const name = `${this.name}CFD`
    const originPath = this.apiGatewayOriginPath
    const allowedMethods = CF.CloudFrontAllowedMethods.ALL
    const behaviors = [{ allowedMethods, isDefaultBehavior: true }]
    const customOriginSource = { domainName: this.apiGatewayDomain }
    const originConfigs = [{ behaviors, customOriginSource, originPath }]
    const conf = { defaultRootObject: '', originConfigs }
    // tslint:disable-next-line:no-unused-expression
    new CF.CloudFrontWebDistribution(this, name, conf)
  }
}

constructor(parent, id, props) {
    super(parent, id, props);

    this.dist = new cloudfront.CloudFrontWebDistribution(this, 'ChangelogsDistribution', {
      aliasConfiguration: domain,
      originConfigs: [
        // All the static files, like CSS, JS, images, etc
        {
          customOriginSource: {
            domainName: props.staticBucket.bucketName + '.s3-website.' + this.region + '.amazonaws.com',
            originProtocolPolicy: 'http-only'
          },
          behaviors: [
            {
              isDefaultBehavior: true,
              compress: true
            }
          ]
        },
        // The automatically generated HTML files

private addCloudfront() {
    const name = `${this.name}CFD`
    const originPath = this.apiGatewayOriginPath
    const behaviors = [{ isDefaultBehavior: true }]
    const customOriginSource = { domainName: this.apiGatewayDomain }
    const originConfigs = [{ behaviors, customOriginSource, originPath }]
    const conf = { defaultRootObject: '', originConfigs }
    // tslint:disable-next-line:no-unused-expression
    new cloudFront.CloudFrontWebDistribution(this, name, conf)
  }
}

'lambda:InvokeAsync'
        )
    )
    const cfConfig = {
      defaultRootObject: '',
      originConfigs: [
        {
          behaviors: [{ isDefaultBehavior: true }],
          customOriginSource: {
            domainName: getApiGatewayDomain(apiGateway.url.toString()),
          },
          originPath: getApiGatewayPath(apiGateway.url.toString()),
        },
      ],
    }
    new cf.CloudFrontWebDistribution(this, `${pkg.name}CFD`, cfConfig)
  }
}

});

        const distibutionConfig: CloudFrontWebDistributionProps = {
            webACLId,
            originConfigs: [
                {
                    s3OriginSource: {
                        ...websiteBucket.s3OriginConfig,
                    },
                    behaviors: [{ isDefaultBehavior: true }],
                },
            ],
            aliasConfiguration,
        };

        this.distribution = new CloudFrontWebDistribution(
            this,
            'WebSiteDistribution',
            distibutionConfig,
        );

        if (aliasConfiguration) {
            new WebsiteAliasRecord(this, 'WebsiteAliasRecord', {
                domainName: aliasConfiguration.domainName,
                recordNames: aliasConfiguration.names,
                target: new CloudFrontTarget(this.distribution),
            });
        }
    }

const distributionConfig = {
            originConfigs: [
                {
                    s3OriginSource: {
                        ...s3OriginConfig,
                    },
                    behaviors: [{ isDefaultBehavior: true }],
                },
            ],
            aliasConfiguration: {
                acmCertRef: cert.certificateArn,
                names: [domainName],
            },
        };
        let distribution = new CloudFrontWebDistribution(
            this,
            'WebSiteDistribution',
            distributionConfig,
        );

        const placeHolderSource = path.join(__dirname, '..', 'docs');

        new BucketDeployment(this, 'WebsiteDeployment', {
            sources: [Source.asset(placeHolderSource)],
            destinationBucket: websiteBucket,
            distribution,
            retainOnDelete: false,
        });

        new PipelineConstruct(this);
    }

const originConfigurations = compact([
      { behaviors, customOriginSource, originPath },
      errorPageConfig,
    ])

    const errorConfig = this.getErrorConfig(500, 500, '/error.html', 60)

    const conf: CloudFrontWebDistributionProps = {
      aliasConfiguration: props.aliasConfig,
      comment: this.id,
      defaultRootObject: '',
      errorConfigurations: [errorConfig],
      loggingConfig: props.logBucket ? { bucket: props.logBucket } : {},
      originConfigs: originConfigurations,
    }
    return new CF.CloudFrontWebDistribution(this, name, conf)
  }