feat(webpack): generate React and Web apps with webpack.config.js file (

#14285)
nrwl · Jan 12, 2023 · 454fba4 · 454fba4
1 parent 0925c29
commit 454fba4
Show file tree

Hide file tree

Showing 78 changed files with 404 additions and 291 deletions.
diff --git a/e2e/node/src/node-esbuild.test.ts b/e2e/node/src/node-esbuild.test.ts
@@ -0,0 +1,35 @@
+import {
+  checkFilesDoNotExist,
+  checkFilesExist,
+  cleanupProject,
+  newProject,
+  runCLI,
+  runCLIAsync,
+  tmpProjPath,
+  uniq,
+  updateFile,
+} from '@nrwl/e2e/utils';
+import { execSync } from 'child_process';
+
+describe('Node Applications + esbuild', () => {
+  beforeEach(() => newProject());
+
+  afterEach(() => cleanupProject());
+
+  it('should generate an app using esbuild', async () => {
+    const app = uniq('nodeapp');
+
+    runCLI(`generate @nrwl/node:app ${app} --bundler=esbuild --no-interactive`);
+
+    checkFilesDoNotExist(`apps/${app}/webpack.config.js`);
+
+    updateFile(`apps/${app}/src/main.ts`, `console.log('Hello World!');`);
+    await runCLIAsync(`build ${app}`);
+
+    checkFilesExist(`dist/apps/${app}/main.cjs`);
+    const result = execSync(`node dist/apps/${app}/main.cjs`, {
+      cwd: tmpProjPath(),
+    }).toString();
+    expect(result).toMatch(/Hello World!/);
+  }, 300_000);
+});
diff --git a/e2e/node/src/node-webpack.test.ts b/e2e/node/src/node-webpack.test.ts
@@ -0,0 +1,35 @@
+import {
+  checkFilesDoNotExist,
+  checkFilesExist,
+  cleanupProject,
+  newProject,
+  runCLI,
+  runCLIAsync,
+  tmpProjPath,
+  uniq,
+  updateFile,
+} from '@nrwl/e2e/utils';
+import { execSync } from 'child_process';
+
+describe('Node Applications + webpack', () => {
+  beforeEach(() => newProject());
+
+  afterEach(() => cleanupProject());
+
+  it('should generate an app using webpack', async () => {
+    const app = uniq('nodeapp');
+
+    runCLI(`generate @nrwl/node:app ${app} --bundler=webpack --no-interactive`);
+
+    checkFilesExist(`apps/${app}/webpack.config.js`);
+
+    updateFile(`apps/${app}/src/main.ts`, `console.log('Hello World!');`);
+    await runCLIAsync(`build ${app}`);
+
+    checkFilesExist(`dist/apps/${app}/main.js`);
+    const result = execSync(`node dist/apps/${app}/main.js`, {
+      cwd: tmpProjPath(),
+    }).toString();
+    expect(result).toMatch(/Hello World!/);
+  }, 300_000);
+});
diff --git a/e2e/node/src/node.test.ts b/e2e/node/src/node.test.ts
@@ -59,8 +59,8 @@ describe('Node Applications', () => {
     updateFile(`apps/${nodeapp}/src/main.ts`, `console.log('Hello World!');`);
     await runCLIAsync(`build ${nodeapp}`);
 
-    checkFilesExist(`dist/apps/${nodeapp}/main.js`);
-    const result = execSync(`node dist/apps/${nodeapp}/main.js`, {
+    checkFilesExist(`dist/apps/${nodeapp}/main.cjs`);
+    const result = execSync(`node dist/apps/${nodeapp}/main.cjs`, {
       cwd: tmpProjPath(),
     }).toString();
     expect(result).toContain('Hello World!');
@@ -76,13 +76,15 @@ describe('Node Applications', () => {
     });
 
     await runCLIAsync(`build ${nodeapp}`);
-    checkFilesExist(`dist/apps/${nodeapp}/index.js`);
+    checkFilesExist(`dist/apps/${nodeapp}/index.cjs`);
   }, 300000);
 
   it('should be able to generate an empty application with additional entries', async () => {
     const nodeapp = uniq('nodeapp');
 
-    runCLI(`generate @nrwl/node:app ${nodeapp} --linter=eslint`);
+    runCLI(
+      `generate @nrwl/node:app ${nodeapp} --linter=eslint --bundler=webpack`
+    );
 
     const lintResults = runCLI(`lint ${nodeapp}`);
     expect(lintResults).toContain('All files pass linting.');
@@ -267,7 +269,7 @@ describe('Build Node apps', () => {
     expect(satisfies(packageJson.dependencies['tslib'], '^2.3.0')).toBeTruthy();
 
     const nodeapp = uniq('nodeapp');
-    runCLI(`generate @nrwl/node:app ${nodeapp}`);
+    runCLI(`generate @nrwl/node:app ${nodeapp} --bundler=webpack`);
 
     const jslib = uniq('jslib');
     runCLI(`generate @nrwl/js:lib ${jslib} --buildable`);

diff --git a/e2e/react/src/react.module-federation.test.ts b/e2e/react/src/react.module-federation.test.ts
@@ -48,19 +48,26 @@ describe('React Module Federation', () => {
     updateFile(
       `apps/${shell}/webpack.config.js`,
       stripIndents`
-        const { withModuleFederation } = require('@nrwl/react/module-federation');
-        const moduleFederationConfig = require('./module-federation.config');
-
-        module.exports = withModuleFederation({
-          ...moduleFederationConfig,
-          remotes: [
-            '${remote1}',
-            ['${remote2}', 'http://localhost:${readPort(
+        import { ModuleFederationConfig } from '@nrwl/devkit';
+        import { composePlugins, withNx } from '@nrwl/webpack';
+        import { withReact } from '@nrwl/react';
+        import { withModuleFederation } from '@nrwl/react/module-federation');
+        
+        const baseConfig = require('./module-federation.config');
+        
+        const config: ModuleFederationConfig = {
+          ...baseConfig,
+              remotes: [
+                '${remote1}',
+                ['${remote2}', 'http://localhost:${readPort(
         remote2
       )}/remoteEntry.js'],
-            ['${remote3}', 'http://localhost:${readPort(remote3)}'],
-          ],
-        });
+                ['${remote3}', 'http://localhost:${readPort(remote3)}'],
+              ],
+        };
+
+        // Nx plugins for webpack to build config object from Nx options and context.
+        module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config));
       `
     );
 

diff --git a/packages/express/src/generators/application/application.ts b/packages/express/src/generators/application/application.ts
@@ -66,6 +66,7 @@ export async function applicationGenerator(tree: Tree, schema: Schema) {
   const initTask = await initGenerator(tree, { ...options, skipFormat: true });
   const applicationTask = await nodeApplicationGenerator(tree, {
     ...schema,
+    bundler: 'webpack',
     skipFormat: true,
   });
   addMainFile(tree, options);

diff --git a/packages/nest/src/generators/application/lib/normalize-options.ts b/packages/nest/src/generators/application/lib/normalize-options.ts
@@ -43,5 +43,6 @@ export function toNodeApplicationGeneratorOptions(
     tags: options.tags,
     unitTestRunner: options.unitTestRunner,
     setParserOptionsProject: options.setParserOptionsProject,
+    bundler: 'webpack', // Some features require webpack plugins such as TS transformers
   };
 }