feat(webpack): add plugin to automatically configure build and serve …

…targets for projects
nrwl · Nov 22, 2023 · fd3afd6 · fd3afd6
1 parent b6ea9cd
commit fd3afd6
Show file tree

Hide file tree

Showing 50 changed files with 1,002 additions and 708 deletions.
diff --git a/docs/generated/packages/webpack/executors/webpack.json b/docs/generated/packages/webpack/executors/webpack.json
@@ -30,8 +30,7 @@
       "compiler": {
         "type": "string",
         "description": "The compiler to use.",
-        "enum": ["babel", "swc", "tsc"],
-        "default": "babel"
+        "enum": ["babel", "swc", "tsc"]
       },
       "outputPath": {
         "type": "string",
@@ -43,8 +42,7 @@
         "type": "string",
         "alias": "platform",
         "description": "Target platform for the build, same as the Webpack target option.",
-        "enum": ["node", "web", "webworker"],
-        "default": "web"
+        "enum": ["node", "web", "webworker"]
       },
       "deleteOutputPath": {
         "type": "boolean",
@@ -53,8 +51,7 @@
       },
       "watch": {
         "type": "boolean",
-        "description": "Enable re-building when files change.",
-        "default": false
+        "description": "Enable re-building when files change."
       },
       "baseHref": {
         "type": "string",
@@ -66,33 +63,27 @@
       },
       "vendorChunk": {
         "type": "boolean",
-        "description": "Use a separate bundle containing only vendor libraries.",
-        "default": true
+        "description": "Use a separate bundle containing only vendor libraries."
       },
       "commonChunk": {
         "type": "boolean",
-        "description": "Use a separate bundle containing code used across multiple bundles.",
-        "default": true
+        "description": "Use a separate bundle containing code used across multiple bundles."
       },
       "runtimeChunk": {
         "type": "boolean",
-        "description": "Use a separate bundle containing the runtime.",
-        "default": true
+        "description": "Use a separate bundle containing the runtime."
       },
       "sourceMap": {
         "description": "Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment.",
-        "default": true,
         "oneOf": [{ "type": "boolean" }, { "type": "string" }]
       },
       "progress": {
         "type": "boolean",
-        "description": "Log progress to the console while building.",
-        "default": false
+        "description": "Log progress to the console while building."
       },
       "assets": {
         "type": "array",
         "description": "List of static application assets.",
-        "default": [],
         "items": {
           "oneOf": [
             {
@@ -163,8 +154,7 @@
               "x-completion-glob": "**/*@(.css|.scss|.less|.sass|.styl|.stylus)"
             }
           ]
-        },
-        "default": []
+        }
       },
       "styles": {
         "type": "array",
@@ -200,18 +190,15 @@
               "x-completion-glob": "**/*@(.css|.scss|.less|.sass|.styl|.stylus)"
             }
           ]
-        },
-        "default": []
+        }
       },
       "namedChunks": {
         "type": "boolean",
-        "description": "Names the produced bundles according to their entry file.",
-        "default": true
+        "description": "Names the produced bundles according to their entry file."
       },
       "outputHashing": {
         "type": "string",
         "description": "Define the output filename cache-busting hashing mode.",
-        "default": "none",
         "enum": ["none", "all", "media", "bundles"]
       },
       "stylePreprocessorOptions": {
@@ -221,8 +208,7 @@
           "includePaths": {
             "description": "Paths to include. Paths will be resolved to project root.",
             "type": "array",
-            "items": { "type": "string" },
-            "default": []
+            "items": { "type": "string" }
           }
         },
         "additionalProperties": false
@@ -251,13 +237,11 @@
       },
       "generatePackageJson": {
         "type": "boolean",
-        "description": "Generates a `package.json` and pruned lock file with the project's `node_module` dependencies populated for installing in a container. If a `package.json` exists in the project's directory, it will be reused with dependencies populated.",
-        "default": false
+        "description": "Generates a `package.json` and pruned lock file with the project's `node_module` dependencies populated for installing in a container. If a `package.json` exists in the project's directory, it will be reused with dependencies populated."
       },
       "transformers": {
         "type": "array",
         "description": "List of TypeScript Compiler Transfomers Plugins.",
-        "default": [],
         "aliases": ["tsPlugins"],
         "items": {
           "oneOf": [
@@ -302,49 +286,40 @@
           { "type": "string", "enum": ["none", "all"] },
           { "type": "array", "items": { "type": "string" } }
         ],
-        "description": "Dependencies to keep external to the bundle. (`all` (default), `none`, or an array of module names)",
-        "default": "all"
+        "description": "Dependencies to keep external to the bundle. (`all` (default), `none`, or an array of module names)"
       },
       "extractCss": {
         "type": "boolean",
-        "description": "Extract CSS into a `.css` file.",
-        "default": true
+        "description": "Extract CSS into a `.css` file."
       },
       "subresourceIntegrity": {
         "type": "boolean",
-        "description": "Enables the use of subresource integrity validation.",
-        "default": false
+        "description": "Enables the use of subresource integrity validation."
       },
       "polyfills": {
         "type": "string",
         "description": "Polyfills to load before application",
         "x-completion-type": "file",
         "x-completion-glob": "**/*@(.js|.ts|.tsx)"
       },
-      "verbose": {
-        "type": "boolean",
-        "description": "Emits verbose output",
-        "default": false
-      },
+      "verbose": { "type": "boolean", "description": "Emits verbose output" },
       "statsJson": {
         "type": "boolean",
-        "description": "Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or `<https://webpack.github.io/analyse>`.",
-        "default": false
+        "description": "Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or `<https://webpack.github.io/analyse>`."
       },
       "isolatedConfig": {
         "type": "boolean",
         "description": "Do not apply Nx webpack plugins automatically. Plugins need to be applied in the project's webpack.config.js file (e.g. withNx, withReact, etc.).",
-        "default": false
+        "default": true,
+        "x-deprecated": "Automatic configuration of Webpack is deprecated in favor of an explicit 'webpack.config.js' file. This option will be removed in Nx 18. See https://nx.dev/recipes/webpack/webpack-config-setup."
       },
       "extractLicenses": {
         "type": "boolean",
-        "description": "Extract all licenses in a separate file, in the case of production builds only.",
-        "default": false
+        "description": "Extract all licenses in a separate file, in the case of production builds only."
       },
       "memoryLimit": {
         "type": "number",
-        "description": "Memory limit for type checking service process in `MB`.",
-        "default": 2048
+        "description": "Memory limit for type checking service process in `MB`."
       },
       "fileReplacements": {
         "description": "Replace files with other files in the build.",
@@ -365,18 +340,16 @@
           },
           "additionalProperties": false,
           "required": ["replace", "with"]
-        },
-        "default": []
+        }
       },
       "buildLibsFromSource": {
         "type": "boolean",
-        "description": "Read buildable libraries from source instead of building them separately.",
+        "description": "Read buildable libraries from source instead of building them separately. If set to `false`, the `tsConfig` option must also be set to remap paths.",
         "default": true
       },
       "generateIndexHtml": {
         "type": "boolean",
-        "description": "Generates `index.html` file to the output path. This can be turned off if using a webpack plugin to generate HTML such as `html-webpack-plugin`.",
-        "default": true
+        "description": "Generates `index.html` file to the output path. This can be turned off if using a webpack plugin to generate HTML such as `html-webpack-plugin`."
       },
       "postcssConfig": {
         "type": "string",
@@ -391,16 +364,15 @@
       },
       "babelUpwardRootMode": {
         "type": "boolean",
-        "description": "Whether to set rootmode to upward. See https://babeljs.io/docs/en/options#rootmode",
-        "default": false
+        "description": "Whether to set rootmode to upward. See https://babeljs.io/docs/en/options#rootmode"
       },
       "babelConfig": {
         "type": "string",
         "description": "Path to the babel configuration file of your project. If not provided, Nx will default to the .babelrc file at the root of your project. See https://babeljs.io/docs/en/config-files",
         "x-completion-type": "file"
       }
     },
-    "required": ["tsConfig", "main"],
+    "required": [],
     "definitions": {
       "assetPattern": {
         "oneOf": [

diff --git a/packages/next/plugins/component-testing.ts b/packages/next/plugins/component-testing.ts
@@ -112,12 +112,13 @@ Able to find CT project, ${!!ctProjectConfig}.`);
     ),
   };
   const configure = composePluginsSync(
-    withNx(),
-    withReact({
+    withNx({
+      target: 'web',
       styles: [],
       scripts: [],
       postcssConfig: ctProjectConfig.root,
-    })
+    }),
+    withReact({})
   );
   const webpackConfig = configure(
     {},

diff --git a/packages/node/src/generators/application/application.spec.ts b/packages/node/src/generators/application/application.spec.ts
@@ -37,14 +37,8 @@ describe('app', () => {
             outputs: ['{options.outputPath}'],
             defaultConfiguration: 'production',
             options: {
-              target: 'node',
-              compiler: 'tsc',
               outputPath: 'dist/my-node-app',
-              main: 'my-node-app/src/main.ts',
-              tsConfig: 'my-node-app/tsconfig.app.json',
-              isolatedConfig: true,
               webpackConfig: 'my-node-app/webpack.config.js',
-              assets: ['my-node-app/src/assets'],
             },
             configurations: {
               development: {},

diff --git a/packages/node/src/generators/application/application.ts b/packages/node/src/generators/application/application.ts
@@ -47,28 +47,16 @@ export interface NormalizedSchema extends Schema {
   parsedTags: string[];
 }
 
-function getWebpackBuildConfig(
-  project: ProjectConfiguration,
-  options: NormalizedSchema
-): TargetConfiguration {
+function getWebpackBuildConfig(options: NormalizedSchema): TargetConfiguration {
   return {
     executor: `@nx/webpack:webpack`,
     outputs: ['{options.outputPath}'],
     defaultConfiguration: 'production',
     options: {
-      target: 'node',
-      compiler: 'tsc',
       outputPath: joinPathFragments(
         'dist',
         options.rootProject ? options.name : options.appProjectRoot
       ),
-      main: joinPathFragments(
-        project.sourceRoot,
-        'main' + (options.js ? '.js' : '.ts')
-      ),
-      tsConfig: joinPathFragments(options.appProjectRoot, 'tsconfig.app.json'),
-      assets: [joinPathFragments(project.sourceRoot, 'assets')],
-      isolatedConfig: true,
       webpackConfig: joinPathFragments(
         options.appProjectRoot,
         'webpack.config.js'
@@ -157,7 +145,7 @@ function addProject(tree: Tree, options: NormalizedSchema) {
   project.targets.build =
     options.bundler === 'esbuild'
       ? getEsBuildConfig(project, options)
-      : getWebpackBuildConfig(project, options);
+      : getWebpackBuildConfig(options);
   project.targets.serve = getServeConfig(options);
 
   addProjectConfiguration(
@@ -169,6 +157,7 @@ function addProject(tree: Tree, options: NormalizedSchema) {
 }
 
 function addAppFiles(tree: Tree, options: NormalizedSchema) {
+  const sourceRoot = joinPathFragments(options.appProjectRoot, 'src');
   generateFiles(
     tree,
     join(__dirname, './files/common'),
@@ -183,6 +172,17 @@ function addAppFiles(tree: Tree, options: NormalizedSchema) {
         tree,
         options.appProjectRoot
       ),
+      webpackPluginOptions: {
+        main: joinPathFragments(
+          sourceRoot,
+          'main' + (options.js ? '.js' : '.ts')
+        ),
+        tsConfig: joinPathFragments(
+          options.appProjectRoot,
+          'tsconfig.app.json'
+        ),
+        assets: [joinPathFragments(sourceRoot, 'assets')],
+      },
     }
   );
 

diff --git a/packages/node/src/generators/application/files/common/webpack.config.js__tmpl__ b/packages/node/src/generators/application/files/common/webpack.config.js__tmpl__
@@ -1,8 +1,17 @@
 const { composePlugins, withNx} = require('@nx/webpack');
 
 // Nx plugins for webpack.
-module.exports = composePlugins(withNx(), (config) => {
-  // Update the webpack config as needed here.
-  // e.g. `config.plugins.push(new MyPlugin())`
-  return config;
-});
+module.exports = composePlugins(
+  withNx({
+    target: 'node',
+    compiler: 'tsc',
+    main: '<%= webpackPluginOptions.main %>',
+    tsConfig: '<%= webpackPluginOptions.tsConfig %>',
+    assets: <%- JSON.stringify(webpackPluginOptions.assets) %>,
+  }),
+  (config) => {
+    // Update the webpack config as needed here.
+    // e.g. `config.plugins.push(new MyPlugin())`
+    return config;
+  }
+);
diff --git a/packages/react/plugins/component-testing/index.ts b/packages/react/plugins/component-testing/index.ts
@@ -8,7 +8,6 @@ import {
   joinPathFragments,
   logger,
   parseTargetString,
-  ProjectGraph,
   readCachedProjectGraph,
   readTargetOptions,
   stripIndents,
@@ -235,11 +234,9 @@ function buildTargetWebpack(
     normalizeOptions,
   } = require('@nx/webpack/src/executors/webpack/lib/normalize-options');
   const {
-    resolveCustomWebpackConfig,
-  } = require('@nx/webpack/src/utils/webpack/custom-webpack');
-  const {
-    getWebpackConfig,
-  } = require('@nx/webpack/src/executors/webpack/lib/get-webpack-config');
+    resolveUserDefinedWebpackConfig,
+  } = require('@nx/webpack/src/utils/webpack/resolve-user-defined-webpack-config');
+  const { withNx } = require('@nx/webpack/src/utils/with-nx');
 
   const options = normalizeOptions(
     withSchemaDefaults(parsed, context),
@@ -251,7 +248,7 @@ function buildTargetWebpack(
   let customWebpack: any;
 
   if (options.webpackConfig) {
-    customWebpack = resolveCustomWebpackConfig(
+    customWebpack = resolveUserDefinedWebpackConfig(
       options.webpackConfig,
       options.tsConfig.startsWith(context.root)
         ? options.tsConfig
@@ -262,12 +259,8 @@ function buildTargetWebpack(
   return async () => {
     customWebpack = await customWebpack;
     // TODO(jack): Once webpackConfig is always set in @nx/webpack:webpack, we no longer need this default.
-    const defaultWebpack = getWebpackConfig(context, {
+    const defaultWebpack = withNx({
       ...options,
-      // cypress will generate its own index.html from component-index.html
-      generateIndexHtml: false,
-      // causes issues with buildable libraries with ENOENT: no such file or directory, scandir error
-      extractLicenses: false,
       root: workspaceRoot,
       projectRoot: ctProjectConfig.root,
       sourceRoot: ctProjectConfig.sourceRoot,