diff --git a/packages/custom-webpack/README.md b/packages/custom-webpack/README.md index 00be079e9..73adcf562 100644 --- a/packages/custom-webpack/README.md +++ b/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), diff --git a/packages/custom-webpack/examples/full-cycle-app/func-webpack.config.ts b/packages/custom-webpack/examples/full-cycle-app/func-webpack.config.ts index de983449e..dec808c90 100644 --- a/packages/custom-webpack/examples/full-cycle-app/func-webpack.config.ts +++ b/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', diff --git a/packages/custom-webpack/src/common.ts b/packages/custom-webpack/src/common.ts index d906c9c89..c9fe86760 100644 --- a/packages/custom-webpack/src/common.ts +++ b/packages/custom-webpack/src/common.ts @@ -12,12 +12,13 @@ import { tsNodeRegister } from './utils'; export const customWebpackConfigTransformFactory: ( options: CustomWebpackSchema, context: BuilderContext -) => ExecutionTransformer = (options, { workspaceRoot }) => browserWebpackConfig => { +) => ExecutionTransformer = (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 ); }; diff --git a/packages/custom-webpack/src/custom-webpack-builder.spec.ts b/packages/custom-webpack/src/custom-webpack-builder.spec.ts index ce70a0be8..1e2912709 100644 --- a/packages/custom-webpack/src/custom-webpack-builder.spec.ts +++ b/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, + {}, {} ); diff --git a/packages/custom-webpack/src/custom-webpack-builder.ts b/packages/custom-webpack/src/custom-webpack-builder.ts index c8061087e..d6eae9e92 100644 --- a/packages/custom-webpack/src/custom-webpack-builder.ts +++ b/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 - | ((baseWebpackConfig: Configuration, buildOptions: any) => Configuration) - | ((baseWebpackConfig: Configuration, buildOptions: any) => Promise); + | ((baseWebpackConfig: Configuration, buildOptions: CustomWebpackBrowserSchema, targetOptions: TargetOptions) => Configuration) + | ((baseWebpackConfig: Configuration, buildOptions: CustomWebpackBrowserSchema, targetOptions: TargetOptions) => Promise); export class CustomWebpackBuilder { static async buildWebpackConfig( root: Path, config: CustomWebpackBuilderConfig, baseWebpackConfig: Configuration, - buildOptions: any + buildOptions: any, + targetOptions: TargetOptions ): Promise { 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`