From 940a90ffd309dfbe16e94aa0b87e9526467b5390 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Sat, 17 Mar 2018 15:20:08 +0200 Subject: [PATCH] fix(prepare): clean platforms/.../app/ when running webpack 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 https://github.com/NativeScript/nativescript-cli/issues/3404 is implemented. fixes https://github.com/NativeScript/nativescript-dev-webpack/issues/463 --- dependencyManager.js | 1 + templates/webpack.angular.js | 12 +++++++++--- templates/webpack.javascript.js | 12 +++++++++--- templates/webpack.typescript.js | 12 +++++++++--- 4 files changed, 28 insertions(+), 9 deletions(-) diff --git a/dependencyManager.js b/dependencyManager.js index c4cb50a6..6d292dcc 100644 --- a/dependencyManager.js +++ b/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", diff --git a/templates/webpack.angular.js b/templates/webpack.angular.js index d959a8f1..e4f7afb5 100644 --- a/templates/webpack.angular.js +++ b/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//... + 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//... - 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 }, diff --git a/templates/webpack.javascript.js b/templates/webpack.javascript.js index def08781..997ddc6b 100644 --- a/templates/webpack.javascript.js +++ b/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//... + 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//... - 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 }, diff --git a/templates/webpack.typescript.js b/templates/webpack.typescript.js index cbb13ea9..14214da0 100644 --- a/templates/webpack.typescript.js +++ b/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//... + 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//... - 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 },