fix(webpack): --env.uglify works properly now (#9165)

packages/webpack/templates/webpack.svelte.js

@@ -1,34 +1,31 @@
-const { join, relative, resolve, sep } = require("path");
+const { join, relative, resolve, sep } = require('path');
 const fs = require('fs');
 
-const webpack = require("webpack");
-const nsWebpack = require("@nativescript/webpack");
-const nativescriptTarget = require("@nativescript/webpack/nativescript-target");
-const { getNoEmitOnErrorFromTSConfig } = require("@nativescript/webpack/utils/tsconfig-utils");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
+const webpack = require('webpack');
+const nsWebpack = require('@nativescript/webpack');
+const nativescriptTarget = require('@nativescript/webpack/nativescript-target');
+const { getNoEmitOnErrorFromTSConfig } = require('@nativescript/webpack/utils/tsconfig-utils');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
-const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
-const TerserPlugin = require("terser-webpack-plugin");
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const { NativeScriptWorkerPlugin } = require('nativescript-worker-loader/NativeScriptWorkerPlugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const hashSalt = Date.now().toString();
-const preprocessConfig =  require("./svelte.config.js");
-const svelteNativePreprocessor = require("svelte-native-preprocessor");
+const preprocessConfig = require('./svelte.config.js');
+const svelteNativePreprocessor = require('svelte-native-preprocessor');
 
-module.exports = env => {
+module.exports = (env) => {
 	// Add your custom Activities, Services and other Android app components here.
 	const appComponents = env.appComponents || [];
-	appComponents.push(...[
-		"@nativescript/core/ui/frame",
-		"@nativescript/core/ui/frame/activity",
-	]);
+	appComponents.push(...['@nativescript/core/ui/frame', '@nativescript/core/ui/frame/activity']);
 
-	const platform = env && (env.android && "android" || env.ios && "ios" || env.platform);
+	const platform = env && ((env.android && 'android') || (env.ios && 'ios') || env.platform);
 	if (!platform) {
-		throw new Error("You need to provide a target platform!");
+		throw new Error('You need to provide a target platform!');
 	}
 
-	const platforms = ["ios", "android"];
+	const platforms = ['ios', 'android'];
 	const projectRoot = __dirname;
 
 	if (env.platform) {
@@ -41,8 +38,8 @@ module.exports = env => {
 	const {
 		// The 'appPath' and 'appResourcesPath' values are fetched from
 		// the nsconfig.json configuration file.
-		appPath = "src",
-		appResourcesPath = "App_Resources",
+		appPath = 'src',
+		appResourcesPath = 'App_Resources',
 
 		// You can provide the following flags when running 'tns run android|ios'
 		snapshot, // --env.snapshot
@@ -55,9 +52,10 @@ module.exports = env => {
 		unitTesting, // --env.unitTesting,
 		testing, // --env.testing
 		verbose, // --env.verbose
+		ci, // --env.ci
 		snapshotInDocker, // --env.snapshotInDocker
 		skipSnapshotTools, // --env.skipSnapshotTools
-		compileSnapshot // --env.compileSnapshot
+		compileSnapshot, // --env.compileSnapshot
 	} = env;
 
 	const useLibs = compileSnapshot;
@@ -70,14 +68,14 @@ module.exports = env => {
 		appFullPath = resolve(projectRoot, 'app');
 	}
 	const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
-	let coreModulesPackageName = "tns-core-modules";
+	let coreModulesPackageName = 'tns-core-modules';
 	const alias = env.alias || {};
 	alias['~/package.json'] = resolve(projectRoot, 'package.json');
 	alias['~'] = appFullPath;
 
 	if (hasRootLevelScopedModules) {
-		coreModulesPackageName = "@nativescript/core";
-		alias["tns-core-modules"] = coreModulesPackageName;
+		coreModulesPackageName = '@nativescript/core';
+		alias['tns-core-modules'] = coreModulesPackageName;
 	}
 	const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
 
@@ -88,34 +86,34 @@ module.exports = env => {
 	const entries = env.entries || {};
 	entries.bundle = entryPath;
 
-	const tsConfigPath = resolve(projectRoot, "tsconfig.json");
+	const tsConfigPath = resolve(projectRoot, 'tsconfig.json');
 
-	const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("@nativescript") > -1);
-	if (platform === "ios" && !areCoreModulesExternal && !testing) {
-		entries["tns_modules/@nativescript/core/inspector_modules"] = "inspector_modules";
-	};
+	const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some((e) => e.indexOf('@nativescript') > -1);
+	if (platform === 'ios' && !areCoreModulesExternal && !testing) {
+		entries['tns_modules/@nativescript/core/inspector_modules'] = 'inspector_modules';
+	}
 
 	let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
 
 	const itemsToClean = [`${dist}/**/*`];
-	if (platform === "android") {
-		itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "src", "main", "assets", "snapshots")}`);
-		itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
+	if (platform === 'android') {
+		itemsToClean.push(`${join(projectRoot, 'platforms', 'android', 'app', 'src', 'main', 'assets', 'snapshots')}`);
+		itemsToClean.push(`${join(projectRoot, 'platforms', 'android', 'app', 'build', 'configurations', 'nativescript-android-snapshot')}`);
 	}
 
 	const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(tsConfigPath);
 
 	nsWebpack.processAppComponents(appComponents, platform);
 	const config = {
-		mode: production ? "production" : "development",
+		mode: production ? 'production' : 'development',
 		context: appFullPath,
 		externals,
 		watchOptions: {
 			ignored: [
 				appResourcesFullPath,
 				// Don't watch hidden files
-				"**/.*",
-			]
+				'**/.*',
+			],
 		},
 		target: nativescriptTarget,
 		entry: entries,
@@ -123,74 +121,78 @@ module.exports = env => {
 			pathinfo: false,
 			path: dist,
 			sourceMapFilename,
-			libraryTarget: "commonjs2",
-			filename: "[name].js",
-			globalObject: "global",
-			hashSalt
+			libraryTarget: 'commonjs2',
+			filename: '[name].js',
+			globalObject: 'global',
+			hashSalt,
 		},
 		resolve: {
-			extensions: [".ts", ".mjs", ".js", ".svelte", ".scss", ".css"],
+			extensions: ['.ts', '.mjs', '.js', '.svelte', '.scss', '.css'],
 			// Resolve {N} system modules from @nativescript/core
-			modules: [
-				resolve(__dirname, `node_modules/${coreModulesPackageName}`),
-				resolve(__dirname, "node_modules"),
-				`node_modules/${coreModulesPackageName}`,
-				"node_modules",
-			],
+			modules: [resolve(__dirname, `node_modules/${coreModulesPackageName}`), resolve(__dirname, 'node_modules'), `node_modules/${coreModulesPackageName}`, 'node_modules'],
 			alias,
 			// resolve symlinks to symlinked modules
-			symlinks: true
+			symlinks: true,
 		},
 		resolveLoader: {
 			// don't resolve symlinks to symlinked loaders
-			symlinks: false
+			symlinks: false,
 		},
 		node: {
 			// Disable node shims that conflict with NativeScript
-			"http": false,
-			"timers": false,
-			"setImmediate": false,
-			"fs": "empty",
-			"__dirname": false,
+			http: false,
+			timers: false,
+			setImmediate: false,
+			fs: 'empty',
+			__dirname: false,
 		},
-		devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
+		devtool: hiddenSourceMap ? 'hidden-source-map' : sourceMap ? 'inline-source-map' : 'none',
 		optimization: {
-			runtimeChunk: "single",
+			runtimeChunk: 'single',
 			noEmitOnErrors: noEmitOnErrorFromTSConfig,
 			splitChunks: {
 				cacheGroups: {
 					vendor: {
-						name: "vendor",
-						chunks: "all",
+						name: 'vendor',
+						chunks: 'all',
 						test: (module, chunks) => {
 							const moduleName = module.nameForCondition ? module.nameForCondition() : '';
-							return /[\\/]node_modules[\\/]/.test(moduleName) ||
-								appComponents.some(comp => comp === moduleName);
-
+							return /[\\/]node_modules[\\/]/.test(moduleName) || appComponents.some((comp) => comp === moduleName);
 						},
 						enforce: true,
 					},
-				}
+				},
 			},
 			minimize: !!uglify,
 			minimizer: [
 				new TerserPlugin({
 					parallel: true,
-					cache: true,
+					cache: !ci,
 					sourceMap: isAnySourceMapEnabled,
 					terserOptions: {
 						output: {
 							comments: false,
-							semicolons: !isAnySourceMapEnabled
+							semicolons: !isAnySourceMapEnabled,
 						},
 						compress: {
 							// The Android SBG has problems parsing the output
 							// when these options are enabled
-							'collapse_vars': platform !== "android",
-							sequences: platform !== "android",
-						}
-					}
-				})
+							collapse_vars: platform !== 'android',
+							sequences: platform !== 'android',
+							// For v8 Compatibility
+							keep_infinity: true, // for V8
+							reduce_funcs: false, // for V8
+							// custom
+							drop_console: production,
+							drop_debugger: true,
+							global_defs: {
+								__UGLIFIED__: true,
+							},
+						},
+						// Required for Element Level CSS, Observable Events, & Android Frame
+						keep_classnames: true,
+					},
+				}),
 			],
 		},
 		module: {
@@ -199,42 +201,39 @@ module.exports = env => {
 					include: join(appFullPath, entryPath),
 					use: [
 						// Require all Android app components
-						platform === "android" && {
-							loader: "@nativescript/webpack/helpers/android-app-components-loader",
-							options: { modules: appComponents }
+						platform === 'android' && {
+							loader: '@nativescript/webpack/helpers/android-app-components-loader',
+							options: { modules: appComponents },
 						},
 
 						{
-							loader: "@nativescript/webpack/bundle-config-loader",
+							loader: '@nativescript/webpack/bundle-config-loader',
 							options: {
 								loadCss: !snapshot, // load the application css if in debug mode
 								unitTesting,
 								appFullPath,
 								projectRoot,
-								ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
-							}
+								ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform),
+							},
 						},
-					].filter(loader => !!loader)
+					].filter((loader) => !!loader),
 				},
 
 				{
 					test: /\.(ts|css|scss|html|xml)$/,
-					use: "@nativescript/webpack/hmr/hot-loader"
+					use: '@nativescript/webpack/hmr/hot-loader',
 				},
 
-				{ test: /\.(html|xml)$/, use: "@nativescript/webpack/helpers/xml-namespace-loader" },
+				{ test: /\.(html|xml)$/, use: '@nativescript/webpack/helpers/xml-namespace-loader' },
 
 				{
 					test: /\.css$/,
-					use: "@nativescript/webpack/helpers/css2json-loader"
+					use: '@nativescript/webpack/helpers/css2json-loader',
 				},
 
 				{
 					test: /\.scss$/,
-					use: [
-						"@nativescript/webpack/helpers/css2json-loader",
-						"sass-loader"
-					]
+					use: ['@nativescript/webpack/helpers/css2json-loader', 'sass-loader'],
 				},
 
 				{
@@ -244,7 +243,7 @@ module.exports = env => {
 				{
 					test: /\.ts$/,
 					use: {
-						loader: "ts-loader",
+						loader: 'ts-loader',
 						options: {
 							configFile: tsConfigPath,
 							// https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds
@@ -253,15 +252,13 @@ module.exports = env => {
 							allowTsInNodeModules: true,
 							compilerOptions: {
 								sourceMap: isAnySourceMapEnabled,
-								declaration: false
+								declaration: false,
 							},
 							getCustomTransformers: (program) => ({
-								before: [
-									require("@nativescript/webpack/transformers/ns-transform-native-classes").default
-								]
-							})
+								before: [require('@nativescript/webpack/transformers/ns-transform-native-classes').default],
+							}),
 						},
-					}
+					},
 				},
 				{
 					test: /\.svelte$/,
@@ -275,35 +272,30 @@ module.exports = env => {
 								hotReload: env.production ? false : true,
 								hotOptions: {
 									injectCss: false,
-									native: true
-								}
-							}
-						}
-					]
-				}
-			]
+									native: true,
+								},
+							},
+						},
+					],
+				},
+			],
 		},
 		plugins: [
 			// Define useful constants like TNS_WEBPACK
 			new webpack.DefinePlugin({
-				"global.TNS_WEBPACK": "true",
-				"global.isAndroid": platform === 'android',
-				"global.isIOS": platform === 'ios',
-				"process": "global.process",
+				'global.TNS_WEBPACK': 'true',
+				'global.isAndroid': platform === 'android',
+				'global.isIOS': platform === 'ios',
+				process: 'global.process',
 			}),
 			// Remove all files from the out dir.
 			new CleanWebpackPlugin({
 				cleanOnceBeforeBuildPatterns: itemsToClean,
-				verbose: !!verbose
+				verbose: !!verbose,
 			}),
 			// Copy assets
-            new CopyWebpackPlugin([
-                { from: { glob: 'assets/**', dot: false } },
-                { from: { glob: 'fonts/**', dot: false } },
-                { from: { glob: '**/*.jpg', dot: false } },
-                { from: { glob: '**/*.png', dot: false } },
-            ], copyIgnore),
-			new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"),
+			new CopyWebpackPlugin([{ from: { glob: 'assets/**', dot: false } }, { from: { glob: 'fonts/**', dot: false } }, { from: { glob: '**/*.jpg', dot: false } }, { from: { glob: '**/*.png', dot: false } }], copyIgnore),
+			new nsWebpack.GenerateNativeScriptEntryPointsPlugin('bundle'),
 			// For instructions on how to set up workers with webpack
 			// check out https://github.com/nativescript/worker-loader
 			new NativeScriptWorkerPlugin(),
@@ -322,36 +314,38 @@ module.exports = env => {
 					memoryLimit: 4096,
 					diagnosticOptions: {
 						syntactic: true,
-						semantic: true
-					}
-				}
-			})
+						semantic: true,
+					},
+				},
+			}),
 		],
 	};
 
 	if (report) {
 		// Generate report files for bundles content
-		config.plugins.push(new BundleAnalyzerPlugin({
-			analyzerMode: "static",
-			openAnalyzer: false,
-			generateStatsFile: true,
-			reportFilename: resolve(projectRoot, "report", `report.html`),
-			statsFilename: resolve(projectRoot, "report", `stats.json`),
-		}));
+		config.plugins.push(
+			new BundleAnalyzerPlugin({
+				analyzerMode: 'static',
+				openAnalyzer: false,
+				generateStatsFile: true,
+				reportFilename: resolve(projectRoot, 'report', `report.html`),
+				statsFilename: resolve(projectRoot, 'report', `stats.json`),
+			})
+		);
 	}
 
 	if (snapshot) {
-		config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
-			chunk: "vendor",
-			requireModules: [
-				"@nativescript/core/bundle-entry-points",
-			],
-			projectRoot,
-			webpackConfig: config,
-			snapshotInDocker,
-			skipSnapshotTools,
-			useLibs
-		}));
+		config.plugins.push(
+			new nsWebpack.NativeScriptSnapshotPlugin({
+				chunk: 'vendor',
+				requireModules: ['@nativescript/core/bundle-entry-points'],
+				projectRoot,
+				webpackConfig: config,
+				snapshotInDocker,
+				skipSnapshotTools,
+				useLibs,
+			})
+		);
 	}
 
 	if (hmr) {