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

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

Hide file tree

Showing 51 changed files with 1,015 additions and 719 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/e2e/react-extensions/src/cypress-component-tests.test.ts b/e2e/react-extensions/src/cypress-component-tests.test.ts
@@ -50,12 +50,12 @@ describe('React Cypress Component Tests', () => {
     createFile(
       `apps/${appName}/src/assets/demo.svg`,
       `
-<svg version="1.1"
-     width="300" height="200"
-     xmlns="http://www.w3.org/2000/svg">
-  <rect width="100%" height="100%" fill="aliceblue" />
-  <circle cx="150" cy="100" r="80" fill="blue" />
-  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">nrwl</text>
+<svg version='1.1'
+     width='300' height='200'
+     xmlns='http://www.w3.org/2000/svg'>
+  <rect width='100%' height='100%' fill='aliceblue' />
+  <circle cx='150' cy='100' r='80' fill='blue' />
+  <text x='150' y='125' font-size='60' text-anchor='middle' fill='white'>nrwl</text>
 </svg>
 `
     );
@@ -132,11 +132,13 @@ export default Input;
     );
     createFile('libs/assets/data.json', JSON.stringify({ data: 'data' }));
     updateJson(join('apps', appName, 'project.json'), (config) => {
-      config.targets['build'].options.assets.push({
-        glob: '**/*',
-        input: 'libs/assets',
-        output: 'assets',
-      });
+      config.targets['build'].options.assets = [
+        {
+          glob: '**/*',
+          input: 'libs/assets',
+          output: 'assets',
+        },
+      ];
       return config;
     });
   });

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;
+  }
+);