Skip to content
This repository was archived by the owner on Aug 7, 2021. It is now read-only.

Commit 69ace1e

Browse files
rosen-vladimirovrosen-vladimirov
committed
feat: allow extending webpack.config.js through env
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
1 parent e95287d commit 69ace1e

17 files changed

+122
-63
lines changed

‎demo/AngularApp/app/App_Resources/Android/app.gradle

+7-8
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@
55
// compile 'com.android.support:recyclerview-v7:+'
66
//}
77

8-
android {
9-
defaultConfig {
8+
android {
9+
defaultConfig {
1010
generatedDensities = []
11-
applicationId = "org.nativescript.AngularApp"
12-
}
13-
aaptOptions {
14-
additionalParameters "--no-version-vectors"
15-
}
16-
}
11+
}
12+
aaptOptions {
13+
additionalParameters "--no-version-vectors"
14+
}
15+
}

‎demo/AngularApp/app/package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
22
"android": {
3-
"v8Flags": "--expose_gc"
3+
"v8Flags": "--expose_gc",
4+
"markingMode": "none"
45
},
56
"main": "main.js",
67
"name": "tns-template-hello-world-ng",
78
"version": "3.3.0"
8-
}
9+
}

‎demo/AngularApp/custom-application-activity.webpack.config.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const webpackConfig = require("./webpack.config");
2+
const path = require("path");
3+
4+
module.exports = env => {
5+
env = env || {};
6+
env.appComponents = env.appComponents || [];
7+
env.appComponents.push(path.resolve(__dirname, "app/activity.android.ts"));
8+
9+
env.entries = env.entries || {};
10+
env.entries.application = "./application.android";
11+
const config = webpackConfig(env);
12+
return config;
13+
};

‎demo/AngularApp/nsconfig.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"webpackConfigPath": "custom-application-activity.webpack.config.js"
3+
}

‎demo/AngularApp/webpack.config.js

+8-7
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ const hashSalt = Date.now().toString();
1818

1919
module.exports = env => {
2020
// Add your custom Activities, Services and other Android app components here.
21-
const appComponents = [
21+
const appComponents = env.appComponents || [];
22+
appComponents.push(...[
2223
"tns-core-modules/ui/frame",
2324
"tns-core-modules/ui/frame/activity",
24-
resolve(__dirname, "app/activity.android.ts")
25-
];
25+
]);
2626

2727
const platform = env && (env.android && "android" || env.ios && "ios");
2828
if (!platform) {
@@ -66,9 +66,8 @@ module.exports = env => {
6666
const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
6767
const hasRootLevelScopedAngular = nsWebpack.hasRootLevelScopedAngular({ projectDir: projectRoot });
6868
let coreModulesPackageName = "tns-core-modules";
69-
const alias = {
70-
'~': appFullPath
71-
};
69+
const alias = env.alias || {};
70+
alias['~'] = appFullPath;
7271

7372
const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath);
7473
if (hasRootLevelScopedModules) {
@@ -85,7 +84,9 @@ module.exports = env => {
8584
const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
8685
const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`;
8786
const entryPath = `.${sep}${entryModule}`;
88-
const entries = { bundle: entryPath, application: "./application.android" };
87+
const entries = env.entries || {};
88+
entries.bundle = entryPath;
89+
8990
const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
9091
if (platform === "ios" && !areCoreModulesExternal) {
9192
entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";

‎demo/JavaScriptApp/app/package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
22
"android": {
3-
"v8Flags": "--expose_gc"
3+
"v8Flags": "--expose_gc",
4+
"markingMode": "none"
45
},
56
"main": "app.js",
67
"name": "tns-template-hello-world",
78
"version": "3.3.0"
8-
}
9+
}

‎demo/JavaScriptApp/custom-application-activity.webpack.config.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const webpackConfig = require("./webpack.config");
2+
const path = require("path");
3+
4+
module.exports = env => {
5+
env = env || {};
6+
env.appComponents = env.appComponents || [];
7+
env.appComponents.push(path.resolve(__dirname, "app/activity.android.js"));
8+
9+
env.entries = env.entries || {};
10+
env.entries.application = "./application.android";
11+
const config = webpackConfig(env);
12+
return config;
13+
};

‎demo/JavaScriptApp/nsconfig.json

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

‎demo/JavaScriptApp/webpack.config.js

+12-8
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ const hashSalt = Date.now().toString();
1212

1313
module.exports = env => {
1414
// Add your custom Activities, Services and other android app components here.
15-
const appComponents = [
15+
const appComponents = env.appComponents || [];
16+
appComponents.push(...[
1617
"tns-core-modules/ui/frame",
1718
"tns-core-modules/ui/frame/activity",
18-
resolve(__dirname, "app/activity.android.js")
19-
];
19+
]);
2020

2121
const platform = env && (env.android && "android" || env.ios && "ios");
2222
if (!platform) {
@@ -56,9 +56,8 @@ module.exports = env => {
5656
const appFullPath = resolve(projectRoot, appPath);
5757
const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
5858
let coreModulesPackageName = "tns-core-modules";
59-
const alias = {
60-
'~': appFullPath
61-
};
59+
const alias = env.alias || {};
60+
alias['~'] = appFullPath;
6261

6362
if (hasRootLevelScopedModules) {
6463
coreModulesPackageName = "@nativescript/core";
@@ -68,7 +67,9 @@ module.exports = env => {
6867

6968
const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
7069
const entryPath = `.${sep}${entryModule}.js`;
71-
const entries = { bundle: entryPath, application: "./application.android" };
70+
const entries = env.entries || {};
71+
entries.bundle = entryPath;
72+
7273
const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
7374
if (platform === "ios" && !areCoreModulesExternal) {
7475
entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
@@ -82,6 +83,7 @@ module.exports = env => {
8283
itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
8384
}
8485

86+
8587
nsWebpack.processAppComponents(appComponents, platform);
8688
const config = {
8789
mode: production ? "production" : "development",
@@ -109,6 +111,8 @@ module.exports = env => {
109111
extensions: [".js", ".scss", ".css"],
110112
// Resolve {N} system modules from tns-core-modules
111113
modules: [
114+
resolve(__dirname, `node_modules/${coreModulesPackageName}`),
115+
resolve(__dirname, "node_modules"),
112116
`node_modules/${coreModulesPackageName}`,
113117
"node_modules",
114118
],
@@ -272,4 +276,4 @@ module.exports = env => {
272276

273277

274278
return config;
275-
};
279+
};

‎demo/TypeScriptApp/app/package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
22
"android": {
3-
"v8Flags": "--expose_gc"
3+
"v8Flags": "--expose_gc",
4+
"markingMode": "none"
45
},
56
"main": "app.js",
67
"name": "tns-template-hello-world-ts",
78
"version": "3.3.0"
8-
}
9+
}

‎demo/TypeScriptApp/custom-application-activity.webpack.config.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const webpackConfig = require("./webpack.config");
2+
const path = require("path");
3+
4+
module.exports = env => {
5+
env = env || {};
6+
env.appComponents = env.appComponents || [];
7+
env.appComponents.push(path.resolve(__dirname, "app/activity.android.ts"));
8+
9+
env.entries = env.entries || {};
10+
env.entries.application = "./application.android";
11+
const config = webpackConfig(env);
12+
return config;
13+
};

‎demo/TypeScriptApp/nsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"useLegacyWorkflow": false
2+
"webpackConfigPath": "./custom-application-activity.webpack.config.js"
33
}

‎demo/TypeScriptApp/webpack.config.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ const hashSalt = Date.now().toString();
1414

1515
module.exports = env => {
1616
// Add your custom Activities, Services and other Android app components here.
17-
const appComponents = [
17+
const appComponents = env.appComponents || [];
18+
appComponents.push(...[
1819
"tns-core-modules/ui/frame",
1920
"tns-core-modules/ui/frame/activity",
20-
resolve(__dirname, "app/activity.android.ts")
21-
];
21+
]);
2222

2323
const platform = env && (env.android && "android" || env.ios && "ios");
2424
if (!platform) {
@@ -59,9 +59,8 @@ module.exports = env => {
5959
const appFullPath = resolve(projectRoot, appPath);
6060
const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
6161
let coreModulesPackageName = "tns-core-modules";
62-
const alias = {
63-
'~': appFullPath
64-
};
62+
const alias = env.alias || {};
63+
alias['~'] = appFullPath;
6564

6665
if (hasRootLevelScopedModules) {
6766
coreModulesPackageName = "@nativescript/core";
@@ -71,7 +70,8 @@ module.exports = env => {
7170

7271
const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
7372
const entryPath = `.${sep}${entryModule}.ts`;
74-
const entries = { bundle: entryPath, application: "./application.android" };
73+
const entries = env.entries || {};
74+
entries.bundle = entryPath;
7575

7676
const tsConfigPath = resolve(projectRoot, "tsconfig.tns.json");
7777

‎templates/webpack.angular.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,11 @@ const hashSalt = Date.now().toString();
1818

1919
module.exports = env => {
2020
// Add your custom Activities, Services and other Android app components here.
21-
const appComponents = [
21+
const appComponents = env.appComponents || [];
22+
appComponents.push(...[
2223
"tns-core-modules/ui/frame",
2324
"tns-core-modules/ui/frame/activity",
24-
];
25+
]);
2526

2627
const platform = env && (env.android && "android" || env.ios && "ios");
2728
if (!platform) {
@@ -65,9 +66,8 @@ module.exports = env => {
6566
const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
6667
const hasRootLevelScopedAngular = nsWebpack.hasRootLevelScopedAngular({ projectDir: projectRoot });
6768
let coreModulesPackageName = "tns-core-modules";
68-
const alias = {
69-
'~': appFullPath
70-
};
69+
const alias = env.alias || {};
70+
alias['~'] = appFullPath;
7171

7272
const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath);
7373
if (hasRootLevelScopedModules) {
@@ -84,7 +84,9 @@ module.exports = env => {
8484
const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
8585
const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`;
8686
const entryPath = `.${sep}${entryModule}`;
87-
const entries = { bundle: entryPath };
87+
const entries = env.entries || {};
88+
entries.bundle = entryPath;
89+
8890
const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
8991
if (platform === "ios" && !areCoreModulesExternal) {
9092
entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";

‎templates/webpack.javascript.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,11 @@ const hashSalt = Date.now().toString();
1212

1313
module.exports = env => {
1414
// Add your custom Activities, Services and other android app components here.
15-
const appComponents = [
15+
const appComponents = env.appComponents || [];
16+
appComponents.push(...[
1617
"tns-core-modules/ui/frame",
1718
"tns-core-modules/ui/frame/activity",
18-
];
19+
]);
1920

2021
const platform = env && (env.android && "android" || env.ios && "ios");
2122
if (!platform) {
@@ -55,9 +56,8 @@ module.exports = env => {
5556
const appFullPath = resolve(projectRoot, appPath);
5657
const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
5758
let coreModulesPackageName = "tns-core-modules";
58-
const alias = {
59-
'~': appFullPath
60-
};
59+
const alias = env.alias || {};
60+
alias['~'] = appFullPath;
6161

6262
if (hasRootLevelScopedModules) {
6363
coreModulesPackageName = "@nativescript/core";
@@ -67,7 +67,9 @@ module.exports = env => {
6767

6868
const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
6969
const entryPath = `.${sep}${entryModule}.js`;
70-
const entries = { bundle: entryPath };
70+
const entries = env.entries || {};
71+
entries.bundle = entryPath;
72+
7173
const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
7274
if (platform === "ios" && !areCoreModulesExternal) {
7375
entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";

‎templates/webpack.typescript.js

+7-6
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@ const hashSalt = Date.now().toString();
1414

1515
module.exports = env => {
1616
// Add your custom Activities, Services and other Android app components here.
17-
const appComponents = [
17+
const appComponents = env.appComponents || [];
18+
appComponents.push(...[
1819
"tns-core-modules/ui/frame",
1920
"tns-core-modules/ui/frame/activity",
20-
];
21+
]);
2122

2223
const platform = env && (env.android && "android" || env.ios && "ios");
2324
if (!platform) {
@@ -58,9 +59,8 @@ module.exports = env => {
5859
const appFullPath = resolve(projectRoot, appPath);
5960
const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
6061
let coreModulesPackageName = "tns-core-modules";
61-
const alias = {
62-
'~': appFullPath
63-
};
62+
const alias = env.alias || {};
63+
alias['~'] = appFullPath;
6464

6565
if (hasRootLevelScopedModules) {
6666
coreModulesPackageName = "@nativescript/core";
@@ -70,7 +70,8 @@ module.exports = env => {
7070

7171
const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
7272
const entryPath = `.${sep}${entryModule}.ts`;
73-
const entries = { bundle: entryPath };
73+
const entries = env.entries || {};
74+
entries.bundle = entryPath;
7475

7576
const tsConfigPath = resolve(projectRoot, "tsconfig.tns.json");
7677

0 commit comments

Comments
 (0)