fix(web): clean output bewtween builds (#3544)

ISSUES CLOSED: #3466

e2e/react/src/react.test.ts

@@ -199,7 +199,7 @@ forEachCli('nx', () => {
         'app__StyledApp'
       );
       expect(
-        readFile(`dist/apps/${styledComponentsApp}/main.esm.js`)
+        readFile(`dist/apps/${styledComponentsApp}/prod/main.esm.js`)
       ).not.toContain('app__StyledApp');
 
       const styledJsxApp = uniq('app');
@@ -334,20 +334,23 @@ forEachCli('nx', () => {
       );
 
       if (opts.checkProdBuild) {
-        runCLI(`build ${appName} --prod --output-hashing none`);
+        const prodOutputPath = `dist/apps/${appName}/prod`;
+        runCLI(
+          `build ${appName} --prod --output-hashing none --outputPath ${prodOutputPath}`
+        );
         filesToCheck = [
-          `dist/apps/${appName}/index.html`,
-          `dist/apps/${appName}/runtime.js`,
-          `dist/apps/${appName}/polyfills.esm.js`,
-          `dist/apps/${appName}/main.esm.js`,
+          `${prodOutputPath}/index.html`,
+          `${prodOutputPath}/runtime.js`,
+          `${prodOutputPath}/polyfills.esm.js`,
+          `${prodOutputPath}/main.esm.js`,
         ];
         if (opts.checkStyles) {
-          filesToCheck.push(`dist/apps/${appName}/styles.css`);
+          filesToCheck.push(`${prodOutputPath}/styles.css`);
         }
         checkFilesExist(...filesToCheck);
 
         if (opts.checkStyles) {
-          expect(readFile(`dist/apps/${appName}/index.html`)).toContain(
+          expect(readFile(`${prodOutputPath}/index.html`)).toContain(
             `<link rel="stylesheet" href="styles.css">`
           );
         }

e2e/utils/index.ts

@@ -6,7 +6,7 @@ import {
   statSync,
   writeFileSync,
 } from 'fs';
-import { ensureDirSync } from 'fs-extra';
+import { ensureDirSync, createFileSync } from 'fs-extra';
 import * as path from 'path';
 
 interface RunCmdOpts {
@@ -341,6 +341,14 @@ function setMaxWorkers() {
   }
 }
 
+export function createFile(f: string, content: string = ''): void {
+  const path = tmpProjPath(f);
+  createFileSync(path);
+  if (content) {
+    updateFile(path, content);
+  }
+}
+
 export function updateFile(f: string, content: string | Function): void {
   ensureDirSync(path.dirname(tmpProjPath(f)));
   if (typeof content === 'string') {

e2e/web/src/web.test.ts

@@ -1,5 +1,6 @@
 import {
   checkFilesExist,
+  checkFilesDoNotExist,
   ensureProject,
   forEachCli,
   readFile,
@@ -7,6 +8,7 @@ import {
   runCLIAsync,
   uniq,
   updateFile,
+  createFile,
 } from '@nrwl/e2e/utils';
 
 forEachCli((currentCLIName) => {
@@ -55,6 +57,23 @@ forEachCli((currentCLIName) => {
       const e2eResults = runCLI(`e2e ${appName}-e2e`);
       expect(e2eResults).toContain('All specs passed!');
     }, 120000);
+
+    it('should remove previous output before building', async () => {
+      ensureProject();
+      const appName = uniq('app');
+
+      runCLI(`generate @nrwl/web:app ${appName} --no-interactive`);
+
+      createFile(`dist/apps/${appName}/_should_remove.txt`);
+      createFile(`dist/apps/_should_not_remove.txt`);
+      checkFilesExist(
+        `dist/apps/${appName}/_should_remove.txt`,
+        `dist/apps/_should_not_remove.txt`
+      );
+      runCLI(`build ${appName}`);
+      checkFilesDoNotExist(`dist/apps/${appName}/_should_remove.txt`);
+      checkFilesExist(`dist/apps/_should_not_remove.txt`);
+    }, 120000);
   });
 
   describe('CLI - Environment Variables', () => {

package.json

@@ -116,6 +116,7 @@
     "caniuse-lite": "^1.0.30001030",
     "circular-dependency-plugin": "^5.0.2",
     "clean-css": "4.2.1",
+    "clean-webpack-plugin": "^3.0.0",
     "codelyzer": "~5.0.1",
     "commitizen": "^4.0.3",
     "confusing-browser-globals": "^1.0.9",

packages/web/package.json

@@ -60,6 +60,7 @@
     "caniuse-lite": "^1.0.30001030",
     "circular-dependency-plugin": "5.2.0",
     "clean-css": "4.2.1",
+    "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "6.0.3",
     "core-js": "^3.6.5",
     "css-loader": "3.4.2",

packages/web/src/utils/config.ts

@@ -2,6 +2,7 @@ import * as webpack from 'webpack';
 import { Configuration, ProgressPlugin, Stats } from 'webpack';
 import { join, resolve } from 'path';
 import { LicenseWebpackPlugin } from 'license-webpack-plugin';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import * as CopyWebpackPlugin from 'copy-webpack-plugin';
 import * as TerserWebpackPlugin from 'terser-webpack-plugin';
 import TsConfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
@@ -82,6 +83,7 @@ export function getBaseWebpackPartial(
       hints: false,
     },
     plugins: [
+      new CleanWebpackPlugin(),
       new ForkTsCheckerWebpackPlugin({
         tsconfig: options.tsConfig,
         memoryLimit:

yarn.lock

@@ -3657,7 +3657,7 @@
     "@types/source-list-map" "*"
     source-map "^0.6.1"
 
-"@types/webpack@*", "@types/webpack@^4.4.24", "@types/webpack@^4.41.8":
+"@types/webpack@*", "@types/webpack@^4.4.24", "@types/webpack@^4.4.31", "@types/webpack@^4.41.8":
   version "4.41.21"
   resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.21.tgz#cc685b332c33f153bb2f5fc1fa3ac8adeb592dee"
   integrity sha512-2j9WVnNrr/8PLAB5csW44xzQSJwS26aOnICsP3pSGCEdsu6KYtfQ6QJsVUKHWRnm1bL7HziJsfh5fHqth87yKA==
@@ -6787,6 +6787,14 @@ clean-stack@^2.0.0:
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
   integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
 
+clean-webpack-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz#a99d8ec34c1c628a4541567aa7b457446460c62b"
+  integrity sha512-MciirUH5r+cYLGCOL5JX/ZLzOZbVr1ot3Fw+KcvbhUb6PM+yycqd9ZhIlcigQ5gl+XhppNmw3bEFuaaMNyLj3A==
+  dependencies:
+    "@types/webpack" "^4.4.31"
+    del "^4.1.1"
+
 cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"