Skip to content

Commit

Permalink
add overrides for angular & webpack options
Browse files Browse the repository at this point in the history 
Fixes #14
  • Loading branch information
@ocombe
ocombe committed Aug 9, 2021
1 parent 990b119 commit fbd7d05
Show file tree
Hide file tree
Showing 10 changed files with 138 additions and 334 deletions.
97 changes: 20 additions & 77 deletions packages/angular-v10/angular-v10.webpack.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {
import { IndexHtmlWebpackPlugin } from '@angular-devkit/build-angular/src/angular-cli-files/plugins/index-html-webpack-plugin';
import { getSystemPath, logging, normalize, tags } from '@angular-devkit/core';
import { NodeJsSyncHost } from '@angular-devkit/core/node';
import { AngularWebpack, WebpackSetup } from '@teambit/angular';
import { AngularWebpack, optionValue, WebpackSetup } from '@teambit/angular';
import { BundlerContext, DevServerContext } from '@teambit/bundler';
import { CompositionsMain } from '@teambit/compositions';
import { Logger } from '@teambit/logger';
Expand Down Expand Up @@ -67,66 +67,11 @@ export class AngularV10Webpack extends AngularWebpack {
* Migrate options from webpack-dev-server 3 to 4
*/
private migrateConfiguration(webpackConfig: Configuration): Configuration {
// /**
// * Removed logLevel in favor of built-in logger
// * see https://webpack.js.org/configuration/other-options/#infrastructurelogginglevel
// */
// // @ts-ignore
// delete webpackConfig.devServer.logLevel;
//
/**
* Removed contentBase in favor of the static option
*/
// @ts-ignore
delete webpackConfig.devServer.contentBase;
//
// /**
// * Removed publicPath in favor of the dev option
// */
// // @ts-ignore
// delete webpackConfig.devServer.publicPath;
//
// /**
// * Moved overlay to client option
// */
// // @ts-ignore
// webpackConfig.devServer.client = webpackConfig.devServer.client || {};
// // @ts-ignore
// webpackConfig.devServer.client.overlay = webpackConfig.devServer.overlay;
// // @ts-ignore
// delete webpackConfig.devServer.overlay;
//
// /**
// * Removed in favor of the static option
// */
// // @ts-ignore
// delete webpackConfig.devServer.watchOptions;
//
// /**
// * Moved sockPath to client option path
// */
// // @ts-ignore
// webpackConfig.devServer.client.path = webpackConfig.devServer.sockPath;
// // @ts-ignore
// delete webpackConfig.devServer.sockPath;
//
// /**
// * Removed stats in favor of the stats options from webpack
// */
// // @ts-ignore
// delete webpackConfig.devServer.stats;
//
// /**
// * Cleaning up undefined values
// */
// // @ts-ignore
// Object.keys(webpackConfig.devServer).forEach(option => {
// // @ts-ignore
// if (typeof webpackConfig.devServer[option] === 'undefined') {
// // @ts-ignore
// delete webpackConfig.devServer[option];
// }
// })

return webpackConfig;
}
Expand All @@ -138,34 +83,32 @@ export class AngularV10Webpack extends AngularWebpack {
workspaceRoot: string,
logger: Logger,
setup: WebpackSetup,
extraOptions: Partial<WebpackConfigWithDevServer> = {}
webpackOptions: Partial<WebpackConfigWithDevServer> = {},
angularOptions: Partial<BrowserBuilderSchema> = {}
): Promise<WebpackConfigWithDevServer | Configuration> {
// Options from angular.json
const browserOptions: BrowserBuilderSchema = {
...angularOptions,
baseHref: path.posix.join('/', context.rootPath!, context.publicPath!),
preserveSymlinks: true,
outputPath: 'public', // doesn't matter because it will be deleted from the config
index: 'src/index.html',
main: 'src/main.ts',
polyfills: 'src/polyfills.ts',
tsConfig: tsconfigPath,
assets: ['src/favicon.ico', 'src/assets'],
styles: ['src/styles.scss'],
scripts: [],
vendorChunk: true,
namedChunks: true,
optimization: setup === WebpackSetup.Build,
buildOptimizer: setup === WebpackSetup.Build,
aot: true,
deleteOutputPath: true,
sourceMap: setup === WebpackSetup.Serve,
outputHashing: setup === WebpackSetup.Build ? OutputHashing.All : OutputHashing.None,
// inlineStyleLanguage: InlineStyleLanguage.Scss,
assets: ['src/favicon.ico', 'src/assets', ...(angularOptions.assets || [])],
styles: ['src/styles.scss', ...(angularOptions.styles || [])],
scripts: angularOptions.scripts,
vendorChunk: optionValue(angularOptions.vendorChunk, true),
namedChunks: optionValue(angularOptions.namedChunks, true),
optimization: optionValue(angularOptions.optimization, setup === WebpackSetup.Build),
buildOptimizer: optionValue(angularOptions.buildOptimizer, setup === WebpackSetup.Build),
aot: optionValue(angularOptions.aot, true),
deleteOutputPath: optionValue(angularOptions.deleteOutputPath, true),
sourceMap: optionValue(angularOptions.sourceMap, setup === WebpackSetup.Serve),
outputHashing: optionValue(angularOptions.outputHashing, setup === WebpackSetup.Build ? OutputHashing.All : OutputHashing.None),
watch: setup === WebpackSetup.Serve,
allowedCommonJsDependencies: ['@teambit/harmony', 'graphql'],
// deployUrl: undefined,
// subresourceIntegrity: undefined,
// crossOrigin: undefined,
allowedCommonJsDependencies: ['@teambit/harmony', 'graphql', ...(angularOptions.allowedCommonJsDependencies || [])],
};

const normalizedWorkspaceRoot = normalize(workspaceRoot);
Expand All @@ -175,7 +118,7 @@ export class AngularV10Webpack extends AngularWebpack {
const host = new NodeJsSyncHost();
const normalizedOptions = normalizeBrowserSchema(host, normalizedWorkspaceRoot, projectRoot, sourceRoot, {
...browserOptions,
...(extraOptions as Partial<BrowserBuilderSchema & DevServerBuilderOptions>),
...(webpackOptions as Partial<BrowserBuilderSchema & DevServerBuilderOptions>),
});

const loggerApi = {
Expand Down Expand Up @@ -205,7 +148,7 @@ export class AngularV10Webpack extends AngularWebpack {
if(setup === WebpackSetup.Serve) {
webpackConfig.devServer = buildServerConfig(
normalizedWorkspaceRoot,
extraOptions as DevServerBuilderOptions,
webpackOptions as DevServerBuilderOptions,
browserOptions,
loggerApi
);
Expand All @@ -215,7 +158,7 @@ export class AngularV10Webpack extends AngularWebpack {
webpackConfig.entry.main.unshift(...entryFiles);

// @ts-ignore
if (extraOptions.liveReload && !extraOptions.hmr) {
if (webpackOptions.liveReload && !webpackOptions.hmr) {
// This is needed because we cannot use the inline option directly in the config
// because of the SuppressExtractedTextChunksWebpackPlugin
// Consider not using SuppressExtractedTextChunksWebpackPlugin when liveReload is enable.
Expand Down Expand Up @@ -250,7 +193,7 @@ export class AngularV10Webpack extends AngularWebpack {
}

// @ts-ignore
if (extraOptions.hmr) {
if (webpackOptions.hmr) {
logger.warn(tags.stripIndents`NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.`);
}
Expand Down
95 changes: 19 additions & 76 deletions packages/angular-v11/angular-v11.webpack.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
} from '@angular-devkit/build-angular/src/webpack/configs';
import { IndexHtmlWebpackPlugin } from '@angular-devkit/build-angular/src/webpack/plugins/index-html-webpack-plugin';
import { getSystemPath, logging, normalize, tags } from '@angular-devkit/core';
import { AngularWebpack, WebpackSetup } from '@teambit/angular';
import { AngularWebpack, optionValue, WebpackSetup } from '@teambit/angular';
import { Workspace } from '@teambit/workspace';
import { CompositionsMain } from '@teambit/compositions';
import { webpack4ServeConfigFactory } from './webpack/webpack4.serve.config';
Expand Down Expand Up @@ -54,66 +54,11 @@ export class AngularV11Webpack extends AngularWebpack {
* Migrate options from webpack-dev-server 3 to 4
*/
private migrateConfiguration(webpackConfig: Configuration): Configuration {
// /**
// * Removed logLevel in favor of built-in logger
// * see https://webpack.js.org/configuration/other-options/#infrastructurelogginglevel
// */
// // @ts-ignore
// delete webpackConfig.devServer.logLevel;
//
/**
* Removed contentBase in favor of the static option
*/
// @ts-ignore
delete webpackConfig.devServer.contentBase;
//
// /**
// * Removed publicPath in favor of the dev option
// */
// // @ts-ignore
// delete webpackConfig.devServer.publicPath;
//
// /**
// * Moved overlay to client option
// */
// // @ts-ignore
// webpackConfig.devServer.client = webpackConfig.devServer.client || {};
// // @ts-ignore
// webpackConfig.devServer.client.overlay = webpackConfig.devServer.overlay;
// // @ts-ignore
// delete webpackConfig.devServer.overlay;
//
// /**
// * Removed in favor of the static option
// */
// // @ts-ignore
// delete webpackConfig.devServer.watchOptions;
//
// /**
// * Moved sockPath to client option path
// */
// // @ts-ignore
// webpackConfig.devServer.client.path = webpackConfig.devServer.sockPath;
// // @ts-ignore
// delete webpackConfig.devServer.sockPath;
//
// /**
// * Removed stats in favor of the stats options from webpack
// */
// // @ts-ignore
// delete webpackConfig.devServer.stats;
//
// /**
// * Cleaning up undefined values
// */
// // @ts-ignore
// Object.keys(webpackConfig.devServer).forEach(option => {
// // @ts-ignore
// if (typeof webpackConfig.devServer[option] === 'undefined') {
// // @ts-ignore
// delete webpackConfig.devServer[option];
// }
// })

return webpackConfig;
}
Expand All @@ -125,34 +70,32 @@ export class AngularV11Webpack extends AngularWebpack {
workspaceRoot: string,
logger: Logger,
setup: WebpackSetup,
extraOptions: Partial<WebpackConfigWithDevServer> = {}
webpackOptions: Partial<WebpackConfigWithDevServer> = {},
angularOptions: Partial<BrowserBuilderSchema> = {}
): Promise<WebpackConfigWithDevServer | Configuration> {
// Options from angular.json
const browserOptions: BrowserBuilderSchema = {
...angularOptions,
baseHref: path.posix.join('/', context.rootPath!, context.publicPath!),
preserveSymlinks: true,
outputPath: 'public', // doesn't matter because it will be deleted from the config
index: 'src/index.html',
main: 'src/main.ts',
polyfills: 'src/polyfills.ts',
tsConfig: tsconfigPath,
assets: ['src/favicon.ico', 'src/assets'],
styles: ['src/styles.scss'],
scripts: [],
vendorChunk: true,
namedChunks: true,
optimization: setup === WebpackSetup.Build,
buildOptimizer: setup === WebpackSetup.Build,
aot: true,
deleteOutputPath: true,
sourceMap: setup === WebpackSetup.Serve,
outputHashing: setup === WebpackSetup.Build ? OutputHashing.All : OutputHashing.None,
// inlineStyleLanguage: InlineStyleLanguage.Scss,
assets: ['src/favicon.ico', 'src/assets', ...(angularOptions.assets || [])],
styles: ['src/styles.scss', ...(angularOptions.styles || [])],
scripts: angularOptions.scripts,
vendorChunk: optionValue(angularOptions.vendorChunk, true),
namedChunks: optionValue(angularOptions.namedChunks, true),
optimization: optionValue(angularOptions.optimization, setup === WebpackSetup.Build),
buildOptimizer: optionValue(angularOptions.buildOptimizer, setup === WebpackSetup.Build),
aot: optionValue(angularOptions.aot, true),
deleteOutputPath: optionValue(angularOptions.deleteOutputPath, true),
sourceMap: optionValue(angularOptions.sourceMap, setup === WebpackSetup.Serve),
outputHashing: optionValue(angularOptions.outputHashing, setup === WebpackSetup.Build ? OutputHashing.All : OutputHashing.None),
watch: setup === WebpackSetup.Serve,
allowedCommonJsDependencies: ['@teambit/harmony', 'graphql'],
// deployUrl: undefined,
// subresourceIntegrity: undefined,
// crossOrigin: undefined,
allowedCommonJsDependencies: ['@teambit/harmony', 'graphql', ...(angularOptions.allowedCommonJsDependencies || [])],
};

const normalizedWorkspaceRoot = normalize(workspaceRoot);
Expand All @@ -161,7 +104,7 @@ export class AngularV11Webpack extends AngularWebpack {

const normalizedOptions = normalizeBrowserSchema(normalizedWorkspaceRoot, projectRoot, sourceRoot, {
...browserOptions,
...(extraOptions as Partial<BrowserBuilderSchema & DevServerBuilderOptions>),
...(webpackOptions as Partial<BrowserBuilderSchema & DevServerBuilderOptions>),
});

const loggerApi = {
Expand Down Expand Up @@ -191,7 +134,7 @@ export class AngularV11Webpack extends AngularWebpack {
webpackConfig.entry.main.unshift(...entryFiles);

// @ts-ignore
if (extraOptions.liveReload && !extraOptions.hmr) {
if (webpackOptions.liveReload && !webpackOptions.hmr) {
// This is needed because we cannot use the inline option directly in the config
// because of the SuppressExtractedTextChunksWebpackPlugin
// Consider not using SuppressExtractedTextChunksWebpackPlugin when liveReload is enable.
Expand Down Expand Up @@ -226,7 +169,7 @@ export class AngularV11Webpack extends AngularWebpack {
}

// @ts-ignore
if (extraOptions.hmr) {
if (webpackOptions.hmr) {
logger.warn(tags.stripIndents`NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.`);
}
Expand Down
Loading

0 comments on commit fbd7d05

Please sign in to comment.