feat(custom-webpack): pass target options to custom webpack config fu…

…nction (#721)

* closes #683

packages/custom-webpack/README.md

@@ -291,7 +291,9 @@ In this case, the behavior will be the same as when exporting a plain object —
 If `customWebpackConfig.path` file exports a function, the behaviour of the builder changes : no more automatic merge is applied, instead the function
 is called with the base Webpack configuration and must return the new configuration.
 
-The function is called with the base config and the builder options as parameters.
+The function is called with the base config the builder options and the target options as parameters.
+`TargetOptions` follows `target` definition from [this](https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/architect/src/input-schema.json) schema
+and can be used to manipulate your build based on the build target.
 
 In this case, `mergeStrategies` and `replaceDuplicatePlugins` options have no effect.
 
@@ -301,7 +303,7 @@ In this case, `mergeStrategies` and `replaceDuplicatePlugins` options have no ef
 const webpack = require('webpack');
 const pkg = require('./package.json');
 
-module.exports = (config, options) => {
+module.exports = (config, options, targetOptions) => {
   config.plugins.push(
     new webpack.DefinePlugin({
       APP_VERSION: JSON.stringify(pkg.version),
@@ -315,11 +317,11 @@ module.exports = (config, options) => {
 Alternatively, using TypeScript:
 
 ```ts
-import { CustomWebpackBrowserSchema } from '@angular-builders/custom-webpack';
+import { CustomWebpackBrowserSchema, TargetOptions } from '@angular-builders/custom-webpack';
 import * as webpack from 'webpack';
 import * as pkg from './package.json';
 
-export default (config: webpack.Configuration, options: CustomWebpackBrowserSchema) => {
+export default (config: webpack.Configuration, options: CustomWebpackBrowserSchema, targetOptions: TargetOptions) => {
   config.plugins.push(
     new webpack.DefinePlugin({
       APP_VERSION: JSON.stringify(pkg.version),

packages/custom-webpack/examples/full-cycle-app/func-webpack.config.ts

@@ -1,11 +1,11 @@
 import { Configuration } from 'webpack';
-import { CustomWebpackBrowserSchema } from '@angular-builders/custom-webpack';
+import { CustomWebpackBrowserSchema, TargetOptions } from '@angular-builders/custom-webpack';
 import * as HtmlWebpackPlugin from 'html-webpack-plugin';
 
 /**
  * This is where you define a function that modifies your webpack config
  */
-export default (cfg: Configuration, opts: CustomWebpackBrowserSchema) => {
+export default (cfg: Configuration, opts: CustomWebpackBrowserSchema, targetOptions: TargetOptions) => {
   cfg.plugins.push(
     new HtmlWebpackPlugin({
       filename: 'footer.html',

packages/custom-webpack/src/common.ts

@@ -12,12 +12,13 @@ import { tsNodeRegister } from './utils';
 export const customWebpackConfigTransformFactory: (
   options: CustomWebpackSchema,
   context: BuilderContext
-) => ExecutionTransformer<Configuration> = (options, { workspaceRoot }) => browserWebpackConfig => {
+) => ExecutionTransformer<Configuration> = (options, { workspaceRoot, target }) => browserWebpackConfig => {
   return CustomWebpackBuilder.buildWebpackConfig(
     normalize(workspaceRoot),
     options.customWebpackConfig,
     browserWebpackConfig,
-    options //TODO: pass Target options as well (configuration option in particular)
+    options,
+    target
   );
 };
 

packages/custom-webpack/src/custom-webpack-builder.spec.ts

@@ -13,6 +13,12 @@ const buildOptions = {
   env: 'prod',
 };
 
+const targetOptions = {
+  project: 'application',
+  configuration: 'production',
+  target: 'serve'
+};
+
 const customWebpackConfig = {
   module: {
     rules: [
@@ -62,6 +68,7 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       null,
       baseWebpackConfig,
+      {},
       {}
     );
 
@@ -71,7 +78,7 @@ describe('CustomWebpackBuilder', () => {
   it('should load webpack.config.js if no path specified', async () => {
     const spy = jest.spyOn(webpackConfigMerger, 'mergeConfigs');
     createConfigFile(defaultWebpackConfigPath, customWebpackConfig);
-    await CustomWebpackBuilder.buildWebpackConfig(__dirname as Path, {}, baseWebpackConfig, {});
+    await CustomWebpackBuilder.buildWebpackConfig(__dirname as Path, {}, baseWebpackConfig, {}, {});
 
     try {
       expect(spy).toHaveBeenCalledWith(
@@ -94,6 +101,7 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       { path: fileName },
       baseWebpackConfig,
+      {},
       {}
     );
 
@@ -118,6 +126,7 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       { mergeStrategies },
       baseWebpackConfig,
+      {},
       {}
     );
 
@@ -141,6 +150,7 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       { replaceDuplicatePlugins: true },
       baseWebpackConfig,
+      {},
       {}
     );
 
@@ -158,9 +168,10 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       {},
       baseWebpackConfig,
-      buildOptions
+      buildOptions,
+      targetOptions
     );
-    expect(spy).toHaveBeenCalledWith(baseWebpackConfig, buildOptions);
+    expect(spy).toHaveBeenCalledWith(baseWebpackConfig, buildOptions, targetOptions);
   });
 
   it('should apply custom function on configuration', async () => {
@@ -170,6 +181,7 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       {},
       baseWebpackConfig,
+      {},
       {}
     );
 
@@ -193,6 +205,7 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       {},
       baseWebpackConfig,
+      {},
       {}
     );
 
@@ -221,6 +234,7 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       {},
       baseWebpackConfig,
+      {},
       {}
     );
 

packages/custom-webpack/src/custom-webpack-builder.ts

@@ -4,21 +4,24 @@ import { Configuration } from 'webpack';
 import { mergeConfigs } from './webpack-config-merger';
 import { CustomWebpackBuilderConfig } from './custom-webpack-builder-config';
 import { tsNodeRegister } from './utils';
+import {TargetOptions} from "./type-definition";
+import {CustomWebpackBrowserSchema} from "./browser";
 
 export const defaultWebpackConfigPath = 'webpack.config.js';
 
 type CustomWebpackConfig =
   | Configuration
   | Promise<Configuration>
-  | ((baseWebpackConfig: Configuration, buildOptions: any) => Configuration)
-  | ((baseWebpackConfig: Configuration, buildOptions: any) => Promise<Configuration>);
+  | ((baseWebpackConfig: Configuration, buildOptions: CustomWebpackBrowserSchema, targetOptions: TargetOptions) => Configuration)
+  | ((baseWebpackConfig: Configuration, buildOptions: CustomWebpackBrowserSchema, targetOptions: TargetOptions) => Promise<Configuration>);
 
 export class CustomWebpackBuilder {
   static async buildWebpackConfig(
     root: Path,
     config: CustomWebpackBuilderConfig,
     baseWebpackConfig: Configuration,
-    buildOptions: any
+    buildOptions: any,
+    targetOptions: TargetOptions
   ): Promise<Configuration> {
     if (!config) {
       return baseWebpackConfig;
@@ -32,7 +35,7 @@ export class CustomWebpackBuilder {
       // That exported function can be synchronous either
       // asynchronous. Given the following example:
       // `module.exports = async (config) => { ... }`
-      return configOrFactoryOrPromise(baseWebpackConfig, buildOptions);
+      return configOrFactoryOrPromise(baseWebpackConfig, buildOptions, targetOptions);
     }
 
     // The user can also export a `Promise` that resolves `Configuration`