fix(prepare): clean platforms/.../app/ when running webpack (#465)

Every time we are running a new build with webpack the platforms/.../app/ dir should be deleted as there may be old assets
left.

Ex.
When the app bundled with snapshot enabled:
```
tns build android --bundle --env.snapshot
```
this produces some assets:
```
platforms/android/.../app/vendor.js
platforms/android/.../app/_embedded_script.js
// ...
```

Then, if the project is bundled without snapshot:
```
tns build android --bundle
```
the produced assets will override the ones that are already in
`platforms/android/.../app`. However, since the build is without
snapshot, an `_embedded_script.js` won't be generated to override the one
that's left in `platforms/android/.../app` from the previous build.

We'll be using `CleanWebpackPlugin` to clean the dist folder.
** Important **: Currently we're running two webpack builds when doing
`tns run android|ios` - one on prepare and one when the watcher starts.
This means that the dist folder will be cleaned two times. This will be
resolved when
NativeScript/nativescript-cli#3404 is
implemented.

fixes #463

dependencyManager.js

@@ -61,6 +61,7 @@ function getRequiredDeps(packageJson) {
         "webpack": "~3.10.0",
         "webpack-bundle-analyzer": "^2.9.1",
         "webpack-sources": "~1.1.0",
+        "clean-webpack-plugin": "~0.1.19",
         "copy-webpack-plugin": "~4.3.0",
         "raw-loader": "~0.5.1",
         "css-loader": "~0.28.7",

templates/webpack.angular.js

@@ -3,6 +3,7 @@ const { resolve, join  } = require("path");
 const webpack = require("webpack");
 const nsWebpack = require("nativescript-dev-webpack");
 const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
@@ -13,6 +14,11 @@ module.exports = env => {
     if (!platform) {
         throw new Error("You need to provide a target platform!");
     }
+
+    const projectRoot = __dirname;
+    // Default destination inside platforms/<platform>/...
+    const dist = resolve(projectRoot, nsWebpack.getAppPath(platform));
+
     const platforms = ["ios", "android"];
     const {
         // The 'appPath' and 'appResourcesDir' values are fetched from
@@ -31,7 +37,6 @@ module.exports = env => {
     } = env;
     const ngToolsWebpackOptions = { tsConfigPath: join(__dirname, "tsconfig.json") };
 
-    const projectRoot = __dirname;
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
 
@@ -53,8 +58,7 @@ module.exports = env => {
         },
         output: {
             pathinfo: true,
-            // Default destination inside platforms/<platform>/...
-            path: resolve(nsWebpack.getAppPath(platform)),
+            path: dist,
             libraryTarget: "commonjs2",
             filename: "[name].js",
         },
@@ -122,6 +126,8 @@ module.exports = env => {
             new webpack.DefinePlugin({
                 "global.TNS_WEBPACK": "true",
             }),
+            // Remove all files from the out dir.
+            new CleanWebpackPlugin([ `${dist}/**/*` ]),
             // Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
                 { from: `${appResourcesFullPath}/**`, context: projectRoot },

templates/webpack.javascript.js

@@ -3,6 +3,7 @@ const { resolve, join  } = require("path");
 const webpack = require("webpack");
 const nsWebpack = require("nativescript-dev-webpack");
 const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
@@ -13,6 +14,11 @@ module.exports = env => {
     if (!platform) {
         throw new Error("You need to provide a target platform!");
     }
+
+    const projectRoot = __dirname;
+    // Default destination inside platforms/<platform>/...
+    const dist = resolve(projectRoot, nsWebpack.getAppPath(platform));
+
     const platforms = ["ios", "android"];
     const {
         // The 'appPath' and 'appResourcesPath' values are fetched from
@@ -29,7 +35,6 @@ module.exports = env => {
         report,
     } = env;
 
-    const projectRoot = __dirname;
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
 
@@ -49,8 +54,7 @@ module.exports = env => {
         },
         output: {
             pathinfo: true,
-            // Default destination inside platforms/<platform>/...
-            path: resolve(nsWebpack.getAppPath(platform)),
+            path: dist,
             libraryTarget: "commonjs2",
             filename: "[name].js",
         },
@@ -105,6 +109,8 @@ module.exports = env => {
             new webpack.DefinePlugin({
                 "global.TNS_WEBPACK": "true",
             }),
+            // Remove all files from the out dir.
+            new CleanWebpackPlugin([ `${dist}/**/*` ]),
             // Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
                 { from: `${appResourcesFullPath}/**`, context: projectRoot },

templates/webpack.typescript.js

@@ -3,6 +3,7 @@ const { resolve, join  } = require("path");
 const webpack = require("webpack");
 const nsWebpack = require("nativescript-dev-webpack");
 const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
@@ -13,6 +14,11 @@ module.exports = env => {
     if (!platform) {
         throw new Error("You need to provide a target platform!");
     }
+
+    const projectRoot = __dirname;
+    // Default destination inside platforms/<platform>/...
+    const dist = resolve(projectRoot, nsWebpack.getAppPath(platform));
+
     const platforms = ["ios", "android"];
     const {
         // The 'appPath' and 'appResourcesDir' values are fetched from
@@ -29,7 +35,6 @@ module.exports = env => {
         report,
     } = env;
 
-    const projectRoot = __dirname;
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
 
@@ -49,8 +54,7 @@ module.exports = env => {
         },
         output: {
             pathinfo: true,
-            // Default destination inside platforms/<platform>/...
-            path: resolve(nsWebpack.getAppPath(platform)),
+            path: dist,
             libraryTarget: "commonjs2",
             filename: "[name].js",
         },
@@ -107,6 +111,8 @@ module.exports = env => {
             new webpack.DefinePlugin({
                 "global.TNS_WEBPACK": "true",
             }),
+            // Remove all files from the out dir.
+            new CleanWebpackPlugin([ `${dist}/**/*` ]),
             // Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
                 { from: `${appResourcesFullPath}/**`, context: projectRoot },