feat(web): rename @nrwl/web:build to @nrwl/web:webpack (#7952)

docs/angular/api-web/executors/rollup.md

@@ -1,6 +1,6 @@
 # @nrwl/web:rollup
 
-Package a library
+Package a library using rollup
 
 Options can be configured in `angular.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/core-concepts/configuration#targets.
 

docs/angular/api-web/executors/webpack.md

@@ -1,6 +1,6 @@
-# @nrwl/web:build
+# @nrwl/web:webpack
 
-Build a application
+Build an application using webpack
 
 Options can be configured in `angular.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/core-concepts/configuration#targets.
 

docs/angular/guides/configuration.md

@@ -15,7 +15,7 @@ The `angular.json` configuration file contains information about the targets and
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@nrwl/web:build",
+          "builder": "@nrwl/web:webpack",
           "outputs": ["dist/apps/myapp"],
           "dependsOn": [
             {
@@ -137,7 +137,7 @@ The `outputs` property lists the folders the builder creates files in. The prope
 ```json
 {
   "build": {
-    "builder": "@nrwl/web:build",
+    "builder": "@nrwl/web:webpack",
     "outputs": ["dist/apps/myapp"],
     "options": {
       "index": "apps/myapp/src/app.html",
@@ -154,7 +154,7 @@ The `configurations` property provides extra sets of values that will be merged
 ```json
 {
   "build": {
-    "builder": "@nrwl/web:build",
+    "builder": "@nrwl/web:webpack",
     "outputs": ["dist/apps/myapp"],
     "options": {
       "index": "apps/myapp/src/app.html",
@@ -186,7 +186,7 @@ Targets can depend on other targets. A common scenario is having to build depend
 ```json
 {
   "build": {
-    "executor": "@nrwl/web:build",
+    "executor": "@nrwl/web:webpack",
     "outputs": ["dist/apps/myapp"],
     "options": {
       "index": "apps/myapp/src/app.html",
@@ -211,7 +211,7 @@ In the following example invoking `nx build myapp` builds all the libraries firs
 ```json
 {
   "build-base": {
-    "executor": "@nrwl/web:build",
+    "executor": "@nrwl/web:webpack",
     "outputs": ["dist/apps/myapp"],
     "options": {
       "index": "apps/myapp/src/app.html",

docs/angular/migration/migration-angularjs.md

@@ -411,7 +411,7 @@ To use webpack instead of gulp, go back to your `angular.json` file and modify t
 ```json
 ...
 "build": {
-  "executor": "@nrwl/web:build",
+  "executor": "@nrwl/web:webpack",
   "options": {
     "outputPath": "dist/apps/realworld",
     "index": "apps/realworld/src/index.html",

docs/map.json

@@ -394,7 +394,7 @@
           {
             "name": "build executor",
             "id": "build",
-            "file": "angular/api-web/executors/build"
+            "file": "angular/api-web/executors/webpack"
           },
           {
             "name": "dev-server executor",
@@ -1718,7 +1718,7 @@
           {
             "name": "build executor",
             "id": "build",
-            "file": "react/api-web/executors/build"
+            "file": "react/api-web/executors/webpack"
           },
           {
             "name": "dev-server executor",
@@ -3006,7 +3006,7 @@
           {
             "name": "build executor",
             "id": "build",
-            "file": "node/api-web/executors/build"
+            "file": "node/api-web/executors/webpack"
           },
           {
             "name": "dev-server executor",

docs/node/api-web/executors/rollup.md

@@ -1,6 +1,6 @@
 # @nrwl/web:rollup
 
-Package a library
+Package a library using rollup
 
 Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/core-concepts/configuration#targets.
 

docs/node/api-web/executors/webpack.md

@@ -1,6 +1,6 @@
-# @nrwl/web:build
+# @nrwl/web:webpack
 
-Build a application
+Build an application using webpack
 
 Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/core-concepts/configuration#targets.
 

docs/react/api-web/executors/rollup.md

@@ -1,6 +1,6 @@
 # @nrwl/web:rollup
 
-Package a library
+Package a library using rollup
 
 Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/core-concepts/configuration#targets.
 

docs/react/api-web/executors/webpack.md

@@ -1,6 +1,6 @@
-# @nrwl/web:build
+# @nrwl/web:webpack
 
-Build a application
+Build an application using webpack
 
 Options can be configured in `workspace.json` when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/core-concepts/configuration#targets.
 

docs/react/guides/configuration.md

@@ -257,7 +257,7 @@ This is an example of `apps/myapp/project.json`:
   "projectType": "application",
   "targets": {
     "build": {
-      "executor": "@nrwl/web:build",
+      "executor": "@nrwl/web:webpack",
       "outputs": ["dist/apps/myapp"],
       "dependsOn": [
         {
@@ -362,7 +362,7 @@ The `configurations` property provides extra sets of values that are merged into
 ```json
 {
   "build": {
-    "executor": "@nrwl/web:build",
+    "executor": "@nrwl/web:webpack",
     "outputs": ["dist/apps/myapp"],
     "options": {
       "index": "apps/myapp/src/app.html",
@@ -397,7 +397,7 @@ building the project. You can specify this using the `dependsOn`.
 ```json
 {
   "build": {
-    "executor": "@nrwl/web:build",
+    "executor": "@nrwl/web:webpack",
     "outputs": ["dist/apps/myapp"],
     "options": {
       "index": "apps/myapp/src/app.html",
@@ -425,7 +425,7 @@ executed and only then `nx build myapp` is executed.
 ```json
 {
   "build-base": {
-    "executor": "@nrwl/web:build",
+    "executor": "@nrwl/web:webpack",
     "outputs": ["dist/apps/myapp"],
     "options": {
       "index": "apps/myapp/src/app.html",

docs/shared/computation-caching.md

@@ -130,7 +130,7 @@ Nx also caches the files generated by a command. The list of folders is listed i
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@nrwl/web:build",
+          "builder": "@nrwl/web:webpack",
           "outputs": ["dist/apps/myapp"],
           "options": {
             "index": "apps/myapp/src/app.html",

docs/shared/using-executors.md

@@ -21,7 +21,7 @@ The executors that are available for each project are defined and configured in
       "generators": {},
       "targets": {
         "build": {
-          "executor": "@nrwl/web:build",
+          "executor": "@nrwl/web:webpack",
           "options": {
             "outputPath": "dist/apps/cart",
             ...

packages/jest/src/migrations/update-10-0-0/update-jest-configs.spec.ts

@@ -91,7 +91,7 @@ describe('update 10.0.0', () => {
             sourceRoot: 'apps/cart/src',
             architect: {
               build: {
-                builder: '@nrwl/web:build',
+                builder: '@nrwl/web:webpack',
               },
               test: {
                 builder: '@nrwl/jest:jest',

packages/next/src/migrations/update-12-6-0/add-next-eslint.spec.ts

@@ -135,7 +135,7 @@ describe('Add next eslint 12.6.0', () => {
             root: 'apps/app1',
             targets: {
               build: {
-                executor: '@nrwl/web:build',
+                executor: '@nrwl/web:webpack',
               },
             },
           },

packages/react/src/generators/application/application.spec.ts

@@ -271,7 +271,7 @@ Object {
 
     const workspaceJson = getProjects(appTree);
     const targetConfig = workspaceJson.get('my-app').targets;
-    expect(targetConfig.build.executor).toEqual('@nrwl/web:build');
+    expect(targetConfig.build.executor).toEqual('@nrwl/web:webpack');
     expect(targetConfig.build.outputs).toEqual(['{options.outputPath}']);
     expect(targetConfig.build.options).toEqual({
       assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'],

packages/react/src/generators/application/lib/add-project.ts

@@ -36,7 +36,7 @@ function maybeJs(options: NormalizedSchema, path: string): string {
 
 function createBuildTarget(options: NormalizedSchema): TargetConfiguration {
   return {
-    executor: '@nrwl/web:build',
+    executor: '@nrwl/web:webpack',
     outputs: ['{options.outputPath}'],
     defaultConfiguration: 'production',
     options: {

packages/react/src/migrations/update-8-10-0/update-8-10-0.ts

@@ -89,7 +89,8 @@ function isReactProject(p) {
     p.architect && p.architect.build ? p.architect.build : null;
   return (
     buildArchitect &&
-    buildArchitect.builder === '@nrwl/web:build' &&
+    (buildArchitect.builder === '@nrwl/web:webpack' ||
+      buildArchitect.builder === '@nrwl/web:build') &&
     (buildArchitect.options.webpackConfig === '@nrwl/react/plugins/babel' ||
       buildArchitect.options.webpackConfig === '@nrwl/react/plugins/webpack')
   );

packages/react/src/migrations/update-8-10-1/fix-react-tsconfig-8-10-1.ts

@@ -37,7 +37,8 @@ function isReactProject(p) {
     p.architect && p.architect.build ? p.architect.build : null;
   return (
     buildArchitect &&
-    buildArchitect.builder === '@nrwl/web:build' &&
+    (buildArchitect.builder === '@nrwl/web:build' ||
+      buildArchitect.builder === '@nrwl/web:webpack') &&
     (buildArchitect.options.webpackConfig === '@nrwl/react/plugins/babel' ||
       buildArchitect.options.webpackConfig === '@nrwl/react/plugins/webpack')
   );

packages/web/executors.json

@@ -1,14 +1,14 @@
 {
   "builders": {
-    "build": {
+    "webpack": {
-      "implementation": "./src/executors/build/compat",
+      "implementation": "./src/executors/webpack/compat",
-      "schema": "./src/executors/build/schema.json",
+      "schema": "./src/executors/webpack/schema.json",
-      "description": "Build a application"
+      "description": "Build an application using webpack"
     },
     "rollup": {
       "implementation": "./src/executors/rollup/rollup.impl",
       "schema": "./src/executors/rollup/schema.json",
-      "description": "Package a library"
+      "description": "Package a library using rollup"
     },
     "dev-server": {
       "implementation": "./src/executors/dev-server/compat",
@@ -22,15 +22,15 @@
     }
   },
   "executors": {
-    "build": {
+    "webpack": {
-      "implementation": "./src/executors/build/build.impl",
+      "implementation": "./src/executors/webpack/webpack.impl",
-      "schema": "./src/executors/build/schema.json",
+      "schema": "./src/executors/webpack/schema.json",
-      "description": "Build a application"
+      "description": "Build an application using webpack"
     },
     "rollup": {
       "implementation": "./src/executors/rollup/rollup.impl",
       "schema": "./src/executors/rollup/schema.json",
-      "description": "Package a library"
+      "description": "Package a library using rollup"
     },
     "dev-server": {
       "implementation": "./src/executors/dev-server/dev-server.impl",

packages/web/src/executors/dev-server/dev-server.impl.ts

@@ -11,7 +11,7 @@ import { map, tap } from 'rxjs/operators';
 import * as WebpackDevServer from 'webpack-dev-server';
 
 import { normalizeWebBuildOptions } from '../../utils/normalize';
-import { WebBuildExecutorOptions } from '../build/build.impl';
+import { WebWebpackExecutorOptions } from '../webpack/webpack.impl';
 import { getDevServerConfig } from '../../utils/devserver.config';
 import {
   calculateProjectDependencies,
@@ -106,9 +106,9 @@ export default async function* devServerExecutor(
 function getBuildOptions(
   options: WebDevServerOptions,
   context: ExecutorContext
-): WebBuildExecutorOptions {
+): WebWebpackExecutorOptions {
   const target = parseTargetString(options.buildTarget);
-  const overrides: Partial<WebBuildExecutorOptions> = {
+  const overrides: Partial<WebWebpackExecutorOptions> = {
     watch: false,
   };
   if (options.maxWorkers) {

packages/web/src/executors/webpack/compat.ts

@@ -1,5 +1,5 @@
 import { convertNxExecutor } from '@nrwl/devkit';
 
-import { run } from './build.impl';
+import { run } from './webpack.impl';
 
 export default convertNxExecutor(run);

packages/web/src/executors/webpack/schema.json

@@ -1,6 +1,6 @@
 {
-  "title": "Web Application Build Target",
+  "title": "Webpack Executor",
-  "description": "Web application build target options for Build Facade",
+  "description": "Builds web applications using webpack",
   "cli": "nx",
   "type": "object",
   "properties": {

packages/web/src/executors/webpack/webpack.impl.ts

@@ -27,7 +27,7 @@ import {
   writeIndexHtml,
 } from '../../utils/webpack/write-index-html';
 
-export interface WebBuildExecutorOptions extends BuildBuilderOptions {
+export interface WebWebpackExecutorOptions extends BuildBuilderOptions {
   index: string;
   budgets?: any[];
   baseHref?: string;
@@ -58,7 +58,7 @@ export interface WebBuildExecutorOptions extends BuildBuilderOptions {
 }
 
 function getWebpackConfigs(
-  options: WebBuildExecutorOptions,
+  options: WebWebpackExecutorOptions,
   context: ExecutorContext
 ): Configuration[] {
   const metadata = context.workspace.projects[context.projectName];
@@ -115,7 +115,7 @@ function getWebpackConfigs(
 }
 
 export async function* run(
-  options: WebBuildExecutorOptions,
+  options: WebWebpackExecutorOptions,
   context: ExecutorContext
 ) {
   // Node versions 12.2-12.8 has a bug where prod builds will hang for 2-3 minutes

packages/web/src/generators/application/application.spec.ts

@@ -254,7 +254,7 @@ describe('app', () => {
     });
     const workspaceJson = readJson(tree, 'workspace.json');
     const architectConfig = workspaceJson.projects['my-app'].architect;
-    expect(architectConfig.build.builder).toEqual('@nrwl/web:build');
+    expect(architectConfig.build.builder).toEqual('@nrwl/web:webpack');
     expect(architectConfig.build.outputs).toEqual(['{options.outputPath}']);
     expect(architectConfig.build.options).toEqual({
       assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'],

packages/web/src/generators/application/application.ts

@@ -23,7 +23,7 @@ import { cypressProjectGenerator } from '@nrwl/cypress';
 import { Linter, lintProjectGenerator } from '@nrwl/linter';
 import { jestProjectGenerator } from '@nrwl/jest';
 
-import { WebBuildExecutorOptions } from '../../executors/build/build.impl';
+import { WebWebpackExecutorOptions } from '../../executors/webpack/webpack.impl';
 import { Schema } from './schema';
 
 interface NormalizedSchema extends Schema {
@@ -50,7 +50,7 @@ function addBuildTarget(
   project: ProjectConfiguration,
   options: NormalizedSchema
 ): ProjectConfiguration {
-  const buildOptions: WebBuildExecutorOptions = {
+  const buildOptions: WebWebpackExecutorOptions = {
     outputPath: joinPathFragments('dist', options.appProjectRoot),
     index: joinPathFragments(options.appProjectRoot, 'src/index.html'),
     baseHref: '/',
@@ -66,7 +66,7 @@ function addBuildTarget(
     ],
     scripts: [],
   };
-  const productionBuildOptions: Partial<WebBuildExecutorOptions> = {
+  const productionBuildOptions: Partial<WebWebpackExecutorOptions> = {
     fileReplacements: [
       {
         replace: joinPathFragments(
@@ -92,7 +92,7 @@ function addBuildTarget(
     targets: {
       ...project.targets,
       build: {
-        executor: '@nrwl/web:build',
+        executor: '@nrwl/web:webpack',
         outputs: ['{options.outputPath}'],
         defaultConfiguration: 'production',
         options: buildOptions,

packages/web/src/migrations/update-13-3-0/rename-build-to-webpack.spec.ts

@@ -0,0 +1,49 @@
+import { readJson } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+
+import rename from './rename-build-to-webpack';
+
+describe('Migration: rename build to webpack', () => {
+  it(`should rename the "build" executor to "webpack"`, async () => {
+    let tree = createTreeWithEmptyWorkspace();
+
+    tree.write(
+      'workspace.json',
+      JSON.stringify({
+        version: 2,
+        projects: {
+          myapp: {
+            root: 'apps/myapp',
+            sourceRoot: 'apps/myapp/src',
+            projectType: 'application',
+            targets: {
+              build: {
+                executor: '@nrwl/web:build',
+                options: {},
+              },
+            },
+          },
+        },
+      })
+    );
+
+    await rename(tree);
+
+    expect(readJson(tree, 'workspace.json')).toEqual({
+      version: 2,
+      projects: {
+        myapp: {
+          root: 'apps/myapp',
+          sourceRoot: 'apps/myapp/src',
+          projectType: 'application',
+          targets: {
+            build: {
+              executor: '@nrwl/web:webpack',
+              options: {},
+            },
+          },
+        },
+      },
+    });
+  });
+});

packages/web/src/migrations/update-13-3-0/rename-build-to-webpack.ts

@@ -0,0 +1,20 @@
+import {
+  formatFiles,
+  getProjects,
+  Tree,
+  updateProjectConfiguration,
+} from '@nrwl/devkit';
+
+export default async function update(host: Tree) {
+  const projects = getProjects(host);
+
+  for (const [name, config] of projects.entries()) {
+    if (config?.targets?.build?.executor !== '@nrwl/web:build') return;
+
+    config.targets.build.executor = '@nrwl/web:webpack';
+
+    updateProjectConfiguration(host, name, config);
+  }
+
+  await formatFiles(host);
+}

packages/web/src/utils/devserver.config.ts

@@ -4,7 +4,7 @@ import * as path from 'path';
 import { basename, resolve } from 'path';
 
 import { getWebConfig } from './web.config';
-import { WebBuildExecutorOptions } from '../executors/build/build.impl';
+import { WebWebpackExecutorOptions } from '../executors/webpack/webpack.impl';
 import { WebDevServerOptions } from '../executors/dev-server/dev-server.impl';
 import { buildServePath } from './serve-path';
 import { OptimizationOptions } from './shared-models';
@@ -16,7 +16,7 @@ export function getDevServerConfig(
   workspaceRoot: string,
   projectRoot: string,
   sourceRoot: string,
-  buildOptions: WebBuildExecutorOptions,
+  buildOptions: WebWebpackExecutorOptions,
   serveOptions: WebDevServerOptions
 ): Partial<WebpackDevServerConfiguration> {
   const webpackConfig = getWebConfig(
@@ -62,7 +62,7 @@ export function getDevServerConfig(
 function getDevServerPartial(
   root: string,
   options: WebDevServerOptions,
-  buildOptions: WebBuildExecutorOptions
+  buildOptions: WebWebpackExecutorOptions
 ): WebpackDevServerConfiguration {
   const servePath = buildServePath(buildOptions);
 

packages/web/src/utils/normalize.ts

@@ -1,4 +1,4 @@
-import { WebBuildExecutorOptions } from '../executors/build/build.impl';
+import { WebWebpackExecutorOptions } from '../executors/webpack/webpack.impl';
 import { normalizePath } from '@nrwl/devkit';
 import { basename, dirname, relative, resolve } from 'path';
 import {
@@ -101,10 +101,10 @@ function normalizeFileReplacements(
 }
 
 export function normalizeWebBuildOptions(
-  options: WebBuildExecutorOptions,
+  options: WebWebpackExecutorOptions,
   root: string,
   sourceRoot: string
-): WebBuildExecutorOptions {
+): WebWebpackExecutorOptions {
   return {
     ...normalizeBuildOptions(options, root, sourceRoot),
     optimization:
@@ -122,7 +122,7 @@ export function normalizeWebBuildOptions(
 }
 
 export function convertBuildOptions(
-  buildOptions: WebBuildExecutorOptions
+  buildOptions: WebWebpackExecutorOptions
 ): any {
   const options = buildOptions as any;
   return <any>{

packages/web/src/utils/serve-path.ts

@@ -1,6 +1,6 @@
-import { WebBuildExecutorOptions } from '../executors/build/build.impl';
+import { WebWebpackExecutorOptions } from '../executors/webpack/webpack.impl';
 
-export function buildServePath(browserOptions: WebBuildExecutorOptions) {
+export function buildServePath(browserOptions: WebWebpackExecutorOptions) {
   let servePath =
     _findDefaultServePath(browserOptions.baseHref, browserOptions.deployUrl) ||
     '/';

packages/web/src/utils/shared-models.ts

@@ -1,4 +1,4 @@
-import { WebBuildExecutorOptions } from '../executors/build/build.impl';
+import { WebWebpackExecutorOptions } from '../executors/webpack/webpack.impl';
 import { FileReplacement } from './normalize';
 
 export interface OptimizationOptions {
@@ -109,7 +109,7 @@ export interface StylePreprocessorOptions {
   includePaths?: string[];
 }
 
-export interface WebpackConfigOptions<T = WebBuildExecutorOptions> {
+export interface WebpackConfigOptions<T = WebWebpackExecutorOptions> {
   root: string;
   projectRoot: string;
   sourceRoot?: string;

packages/web/src/utils/web.config.ts

@@ -5,7 +5,7 @@ import { ScriptTarget } from 'typescript';
 import { getHashDigest, interpolateName } from 'loader-utils';
 import { Configuration } from 'webpack';
 
-import { WebBuildExecutorOptions } from '../executors/build/build.impl';
+import { WebWebpackExecutorOptions } from '../executors/webpack/webpack.impl';
 import { convertBuildOptions } from './normalize';
 import { getBaseWebpackPartial } from './config';
 import { getBrowserConfig } from './webpack/partials/browser';
@@ -27,7 +27,7 @@ export function getWebConfig(
   workspaceRoot,
   projectRoot,
   sourceRoot,
-  options: WebBuildExecutorOptions,
+  options: WebWebpackExecutorOptions,
   esm?: boolean,
   isScriptOptimizeOn?: boolean,
   configuration?: string
@@ -71,12 +71,12 @@ export function getWebConfig(
   ]);
 }
 
-function getBrowserPartial(wco: any, options: WebBuildExecutorOptions) {
+function getBrowserPartial(wco: any, options: WebWebpackExecutorOptions) {
   return getBrowserConfig(wco);
 }
 
 function _getBaseWebpackPartial(
-  options: WebBuildExecutorOptions,
+  options: WebWebpackExecutorOptions,
   esm: boolean,
   isScriptOptimizeOn: boolean,
   emitDecoratorMetadata: boolean,

packages/web/src/utils/webpack/partials/styles.ts

@@ -1,7 +1,7 @@
 import * as path from 'path';
 import { RuleSetRule } from 'webpack';
 
-import { WebBuildExecutorOptions } from '../../../executors/build/build.impl';
+import { WebWebpackExecutorOptions } from '../../../executors/webpack/webpack.impl';
 import { RemoveEmptyScriptsPlugin } from '../plugins/remove-empty-scripts-plugin';
 import { getOutputHashFormat } from '../../hash-format';
 import { normalizeExtraEntryPoints } from '../../normalize';
@@ -18,7 +18,7 @@ const RawCssLoader = require.resolve(
 
 export function getStylesConfig(
   root: string,
-  buildOptions: WebBuildExecutorOptions,
+  buildOptions: WebWebpackExecutorOptions,
   includePaths: string[]
 ) {
   const entryPoints: { [key: string]: string[] } = {};