feat: allow extending webpack.config.js through env

rosen-vladimirov · rosen-vladimirov · commit 69ace1e470c8 · 2020-01-16T14:26:48.000+02:00
In case you need to extend the webpack.config.js, currently you cannot extend everything and you need to write a lot of custom logic. This PR adds the possibility to extend the appComponents, entries and alias through `env`.
Also update demo applications to use latest CLI feature for extending webpack.config.js
diff --git a/demo/AngularApp/app/App_Resources/Android/app.gradle b/demo/AngularApp/app/App_Resources/Android/app.gradle
@@ -5,12 +5,11 @@
 //	compile 'com.android.support:recyclerview-v7:+'
 //}
 
-android {  
-  defaultConfig {  
+android {
+  defaultConfig {
     generatedDensities = []
-    applicationId = "org.nativescript.AngularApp"  
-  }  
-  aaptOptions {  
-    additionalParameters "--no-version-vectors"  
-  }  
-} 
+  }
+  aaptOptions {
+    additionalParameters "--no-version-vectors"
+  }
+}
diff --git a/demo/AngularApp/app/package.json b/demo/AngularApp/app/package.json
@@ -1,8 +1,9 @@
 {
   "android": {
-    "v8Flags": "--expose_gc"
+    "v8Flags": "--expose_gc",
+    "markingMode": "none"
   },
   "main": "main.js",
   "name": "tns-template-hello-world-ng",
   "version": "3.3.0"
-}
+}
diff --git a/demo/AngularApp/custom-application-activity.webpack.config.js b/demo/AngularApp/custom-application-activity.webpack.config.js
@@ -0,0 +1,13 @@
+const webpackConfig = require("./webpack.config");
+const path = require("path");
+
+module.exports = env => {
+	env = env || {};
+	env.appComponents = env.appComponents || [];
+	env.appComponents.push(path.resolve(__dirname, "app/activity.android.ts"));
+
+	env.entries = env.entries || {};
+	env.entries.application = "./application.android";
+	const config = webpackConfig(env);
+	return config;
+};
diff --git a/demo/AngularApp/nsconfig.json b/demo/AngularApp/nsconfig.json
@@ -0,0 +1,3 @@
+{
+    "webpackConfigPath": "custom-application-activity.webpack.config.js"
+}
diff --git a/demo/AngularApp/webpack.config.js b/demo/AngularApp/webpack.config.js
@@ -18,11 +18,11 @@ const hashSalt = Date.now().toString();
 
 module.exports = env => {
     // Add your custom Activities, Services and other Android app components here.
-    const appComponents = [
+    const appComponents = env.appComponents || [];
+    appComponents.push(...[
         "tns-core-modules/ui/frame",
         "tns-core-modules/ui/frame/activity",
-        resolve(__dirname, "app/activity.android.ts")
-    ];
+    ]);
 
     const platform = env && (env.android && "android" || env.ios && "ios");
     if (!platform) {
@@ -66,9 +66,8 @@ module.exports = env => {
     const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
     const hasRootLevelScopedAngular = nsWebpack.hasRootLevelScopedAngular({ projectDir: projectRoot });
     let coreModulesPackageName = "tns-core-modules";
-    const alias = {
-        '~': appFullPath
-    };
+    const alias = env.alias || {};
+    alias['~'] = appFullPath;
 
     const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath);
     if (hasRootLevelScopedModules) {
@@ -85,7 +84,9 @@ module.exports = env => {
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
     const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`;
     const entryPath = `.${sep}${entryModule}`;
-    const entries = { bundle: entryPath, application: "./application.android" };
+    const entries = env.entries || {};
+    entries.bundle = entryPath;
+
     const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
     if (platform === "ios" && !areCoreModulesExternal) {
         entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
diff --git a/demo/JavaScriptApp/app/package.json b/demo/JavaScriptApp/app/package.json
@@ -1,8 +1,9 @@
 {
   "android": {
-    "v8Flags": "--expose_gc"
+    "v8Flags": "--expose_gc",
+    "markingMode": "none"
   },
   "main": "app.js",
   "name": "tns-template-hello-world",
   "version": "3.3.0"
-}
+}
diff --git a/demo/JavaScriptApp/custom-application-activity.webpack.config.js b/demo/JavaScriptApp/custom-application-activity.webpack.config.js
@@ -0,0 +1,13 @@
+const webpackConfig = require("./webpack.config");
+const path = require("path");
+
+module.exports = env => {
+	env = env || {};
+	env.appComponents = env.appComponents || [];
+	env.appComponents.push(path.resolve(__dirname, "app/activity.android.js"));
+
+	env.entries = env.entries || {};
+	env.entries.application = "./application.android";
+	const config = webpackConfig(env);
+	return config;
+};
diff --git a/demo/JavaScriptApp/nsconfig.json b/demo/JavaScriptApp/nsconfig.json
@@ -0,0 +1,3 @@
+{
+    "webpackConfigPath": "./custom-application-activity.webpack.config.js"
+}
diff --git a/demo/JavaScriptApp/webpack.config.js b/demo/JavaScriptApp/webpack.config.js
@@ -12,11 +12,11 @@ const hashSalt = Date.now().toString();
 
 module.exports = env => {
     // Add your custom Activities, Services and other android app components here.
-    const appComponents = [
+    const appComponents = env.appComponents || [];
+    appComponents.push(...[
         "tns-core-modules/ui/frame",
         "tns-core-modules/ui/frame/activity",
-        resolve(__dirname, "app/activity.android.js")
-    ];
+    ]);
 
     const platform = env && (env.android && "android" || env.ios && "ios");
     if (!platform) {
@@ -56,9 +56,8 @@ module.exports = env => {
     const appFullPath = resolve(projectRoot, appPath);
     const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
     let coreModulesPackageName = "tns-core-modules";
-    const alias = {
-        '~': appFullPath
-    };
+    const alias = env.alias || {};
+    alias['~'] = appFullPath;
 
     if (hasRootLevelScopedModules) {
         coreModulesPackageName = "@nativescript/core";
@@ -68,7 +67,9 @@ module.exports = env => {
 
     const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
     const entryPath = `.${sep}${entryModule}.js`;
-    const entries = { bundle: entryPath, application: "./application.android" };
+    const entries = env.entries || {};
+    entries.bundle = entryPath;
+
     const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
     if (platform === "ios" && !areCoreModulesExternal) {
         entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
@@ -82,6 +83,7 @@ module.exports = env => {
         itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
     }
 
+
     nsWebpack.processAppComponents(appComponents, platform);
     const config = {
         mode: production ? "production" : "development",
@@ -109,6 +111,8 @@ module.exports = env => {
             extensions: [".js", ".scss", ".css"],
             // Resolve {N} system modules from tns-core-modules
             modules: [
+                resolve(__dirname, `node_modules/${coreModulesPackageName}`),
+                resolve(__dirname, "node_modules"),
                 `node_modules/${coreModulesPackageName}`,
                 "node_modules",
             ],
@@ -272,4 +276,4 @@ module.exports = env => {
 
 
     return config;
-};
+};
diff --git a/demo/TypeScriptApp/app/package.json b/demo/TypeScriptApp/app/package.json
@@ -1,8 +1,9 @@
 {
   "android": {
-    "v8Flags": "--expose_gc"
+    "v8Flags": "--expose_gc",
+    "markingMode": "none"
   },
   "main": "app.js",
   "name": "tns-template-hello-world-ts",
   "version": "3.3.0"
-}
+}
diff --git a/demo/TypeScriptApp/custom-application-activity.webpack.config.js b/demo/TypeScriptApp/custom-application-activity.webpack.config.js
@@ -0,0 +1,13 @@
+const webpackConfig = require("./webpack.config");
+const path = require("path");
+
+module.exports = env => {
+	env = env || {};
+	env.appComponents = env.appComponents || [];
+	env.appComponents.push(path.resolve(__dirname, "app/activity.android.ts"));
+
+	env.entries = env.entries || {};
+	env.entries.application = "./application.android";
+	const config = webpackConfig(env);
+	return config;
+};
diff --git a/demo/TypeScriptApp/nsconfig.json b/demo/TypeScriptApp/nsconfig.json
@@ -1,3 +1,3 @@
 {
-	"useLegacyWorkflow": false
+	"webpackConfigPath": "./custom-application-activity.webpack.config.js"
 }
diff --git a/demo/TypeScriptApp/webpack.config.js b/demo/TypeScriptApp/webpack.config.js
@@ -14,11 +14,11 @@ const hashSalt = Date.now().toString();
 
 module.exports = env => {
     // Add your custom Activities, Services and other Android app components here.
-    const appComponents = [
+    const appComponents = env.appComponents || [];
+    appComponents.push(...[
         "tns-core-modules/ui/frame",
         "tns-core-modules/ui/frame/activity",
-        resolve(__dirname, "app/activity.android.ts")
-    ];
+    ]);
 
     const platform = env && (env.android && "android" || env.ios && "ios");
     if (!platform) {
@@ -59,9 +59,8 @@ module.exports = env => {
     const appFullPath = resolve(projectRoot, appPath);
     const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
     let coreModulesPackageName = "tns-core-modules";
-    const alias = {
-        '~': appFullPath
-    };
+    const alias = env.alias || {};
+    alias['~'] = appFullPath;
 
     if (hasRootLevelScopedModules) {
         coreModulesPackageName = "@nativescript/core";
@@ -71,7 +70,8 @@ module.exports = env => {
 
     const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
     const entryPath = `.${sep}${entryModule}.ts`;
-    const entries = { bundle: entryPath, application: "./application.android" };
+    const entries = env.entries || {};
+    entries.bundle = entryPath;
 
     const tsConfigPath = resolve(projectRoot, "tsconfig.tns.json");
 
diff --git a/templates/webpack.angular.js b/templates/webpack.angular.js
@@ -18,10 +18,11 @@ const hashSalt = Date.now().toString();
 
 module.exports = env => {
     // Add your custom Activities, Services and other Android app components here.
-    const appComponents = [
+    const appComponents = env.appComponents || [];
+    appComponents.push(...[
         "tns-core-modules/ui/frame",
         "tns-core-modules/ui/frame/activity",
-    ];
+    ]);
 
     const platform = env && (env.android && "android" || env.ios && "ios");
     if (!platform) {
@@ -65,9 +66,8 @@ module.exports = env => {
     const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
     const hasRootLevelScopedAngular = nsWebpack.hasRootLevelScopedAngular({ projectDir: projectRoot });
     let coreModulesPackageName = "tns-core-modules";
-    const alias = {
-        '~': appFullPath
-    };
+    const alias = env.alias || {};
+    alias['~'] = appFullPath;
 
     const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath);
     if (hasRootLevelScopedModules) {
@@ -84,7 +84,9 @@ module.exports = env => {
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
     const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`;
     const entryPath = `.${sep}${entryModule}`;
-    const entries = { bundle: entryPath };
+    const entries = env.entries || {};
+    entries.bundle = entryPath;
+
     const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
     if (platform === "ios" && !areCoreModulesExternal) {
         entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
diff --git a/templates/webpack.javascript.js b/templates/webpack.javascript.js
@@ -12,10 +12,11 @@ const hashSalt = Date.now().toString();
 
 module.exports = env => {
     // Add your custom Activities, Services and other android app components here.
-    const appComponents = [
+    const appComponents = env.appComponents || [];
+    appComponents.push(...[
         "tns-core-modules/ui/frame",
         "tns-core-modules/ui/frame/activity",
-    ];
+    ]);
 
     const platform = env && (env.android && "android" || env.ios && "ios");
     if (!platform) {
@@ -55,9 +56,8 @@ module.exports = env => {
     const appFullPath = resolve(projectRoot, appPath);
     const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
     let coreModulesPackageName = "tns-core-modules";
-    const alias = {
-        '~': appFullPath
-    };
+    const alias = env.alias || {};
+    alias['~'] = appFullPath;
 
     if (hasRootLevelScopedModules) {
         coreModulesPackageName = "@nativescript/core";
@@ -67,7 +67,9 @@ module.exports = env => {
 
     const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
     const entryPath = `.${sep}${entryModule}.js`;
-    const entries = { bundle: entryPath };
+    const entries = env.entries || {};
+    entries.bundle = entryPath;
+
     const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
     if (platform === "ios" && !areCoreModulesExternal) {
         entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
diff --git a/templates/webpack.typescript.js b/templates/webpack.typescript.js
@@ -14,10 +14,11 @@ const hashSalt = Date.now().toString();
 
 module.exports = env => {
     // Add your custom Activities, Services and other Android app components here.
-    const appComponents = [
+    const appComponents = env.appComponents || [];
+    appComponents.push(...[
         "tns-core-modules/ui/frame",
         "tns-core-modules/ui/frame/activity",
-    ];
+    ]);
 
     const platform = env && (env.android && "android" || env.ios && "ios");
     if (!platform) {
@@ -58,9 +59,8 @@ module.exports = env => {
     const appFullPath = resolve(projectRoot, appPath);
     const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
     let coreModulesPackageName = "tns-core-modules";
-    const alias = {
-        '~': appFullPath
-    };
+    const alias = env.alias || {};
+    alias['~'] = appFullPath;
 
     if (hasRootLevelScopedModules) {
         coreModulesPackageName = "@nativescript/core";
@@ -70,7 +70,8 @@ module.exports = env => {
 
     const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
     const entryPath = `.${sep}${entryModule}.ts`;
-    const entries = { bundle: entryPath };
+    const entries = env.entries || {};
+    entries.bundle = entryPath;
 
     const tsConfigPath = resolve(projectRoot, "tsconfig.tns.json");
 
diff --git a/templates/webpack.vue.js b/templates/webpack.vue.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "webpackConfigPath": "custom-application-activity.webpack.config.js"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "webpackConfigPath": "./custom-application-activity.webpack.config.js"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`{`
`2`		`- "useLegacyWorkflow": false`
	`2`	`+ "webpackConfigPath": "./custom-application-activity.webpack.config.js"`
`3`	`3`	`}`