From 69ace1e470c829d318a339ee089ab77502ba289e Mon Sep 17 00:00:00 2001 From: rosen-vladimirov Date: Thu, 16 Jan 2020 14:26:48 +0200 Subject: [PATCH 1/2] 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 --- .../app/App_Resources/Android/app.gradle | 15 +++++++------- demo/AngularApp/app/package.json | 5 +++-- ...tom-application-activity.webpack.config.js | 13 ++++++++++++ demo/AngularApp/nsconfig.json | 3 +++ demo/AngularApp/webpack.config.js | 15 +++++++------- demo/JavaScriptApp/app/package.json | 5 +++-- ...tom-application-activity.webpack.config.js | 13 ++++++++++++ demo/JavaScriptApp/nsconfig.json | 3 +++ demo/JavaScriptApp/webpack.config.js | 20 +++++++++++-------- demo/TypeScriptApp/app/package.json | 5 +++-- ...tom-application-activity.webpack.config.js | 13 ++++++++++++ demo/TypeScriptApp/nsconfig.json | 2 +- demo/TypeScriptApp/webpack.config.js | 14 ++++++------- templates/webpack.angular.js | 14 +++++++------ templates/webpack.javascript.js | 14 +++++++------ templates/webpack.typescript.js | 13 ++++++------ templates/webpack.vue.js | 18 +++++++++-------- 17 files changed, 122 insertions(+), 63 deletions(-) create mode 100644 demo/AngularApp/custom-application-activity.webpack.config.js create mode 100644 demo/AngularApp/nsconfig.json create mode 100644 demo/JavaScriptApp/custom-application-activity.webpack.config.js create mode 100644 demo/JavaScriptApp/nsconfig.json create mode 100644 demo/TypeScriptApp/custom-application-activity.webpack.config.js diff --git a/demo/AngularApp/app/App_Resources/Android/app.gradle b/demo/AngularApp/app/App_Resources/Android/app.gradle index e45b55b8..84cd3ad5 100644 --- 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 index 80037c0e..d0929617 100644 --- 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" -} \ No newline at end of file +} diff --git a/demo/AngularApp/custom-application-activity.webpack.config.js b/demo/AngularApp/custom-application-activity.webpack.config.js new file mode 100644 index 00000000..a02e2fef --- /dev/null +++ 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; +}; \ No newline at end of file diff --git a/demo/AngularApp/nsconfig.json b/demo/AngularApp/nsconfig.json new file mode 100644 index 00000000..2f45709d --- /dev/null +++ b/demo/AngularApp/nsconfig.json @@ -0,0 +1,3 @@ +{ + "webpackConfigPath": "custom-application-activity.webpack.config.js" +} \ No newline at end of file diff --git a/demo/AngularApp/webpack.config.js b/demo/AngularApp/webpack.config.js index 8c81fce9..64d67979 100644 --- 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 index fa35743e..753ef1a0 100644 --- 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" -} \ No newline at end of file +} diff --git a/demo/JavaScriptApp/custom-application-activity.webpack.config.js b/demo/JavaScriptApp/custom-application-activity.webpack.config.js new file mode 100644 index 00000000..8c105595 --- /dev/null +++ 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; +}; \ No newline at end of file diff --git a/demo/JavaScriptApp/nsconfig.json b/demo/JavaScriptApp/nsconfig.json new file mode 100644 index 00000000..8d06e691 --- /dev/null +++ b/demo/JavaScriptApp/nsconfig.json @@ -0,0 +1,3 @@ +{ + "webpackConfigPath": "./custom-application-activity.webpack.config.js" +} \ No newline at end of file diff --git a/demo/JavaScriptApp/webpack.config.js b/demo/JavaScriptApp/webpack.config.js index d5bc1b75..e91c6e0a 100644 --- 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; -}; \ No newline at end of file +}; diff --git a/demo/TypeScriptApp/app/package.json b/demo/TypeScriptApp/app/package.json index a2e5436e..1a4b32df 100644 --- 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" -} \ No newline at end of file +} diff --git a/demo/TypeScriptApp/custom-application-activity.webpack.config.js b/demo/TypeScriptApp/custom-application-activity.webpack.config.js new file mode 100644 index 00000000..a02e2fef --- /dev/null +++ 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; +}; \ No newline at end of file diff --git a/demo/TypeScriptApp/nsconfig.json b/demo/TypeScriptApp/nsconfig.json index a6d75472..564d5b27 100644 --- a/demo/TypeScriptApp/nsconfig.json +++ b/demo/TypeScriptApp/nsconfig.json @@ -1,3 +1,3 @@ { - "useLegacyWorkflow": false + "webpackConfigPath": "./custom-application-activity.webpack.config.js" } \ No newline at end of file diff --git a/demo/TypeScriptApp/webpack.config.js b/demo/TypeScriptApp/webpack.config.js index 8ace2ca1..4d1c3ad6 100644 --- 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 index 532fb64c..64d67979 100644 --- 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 index 8ed52c38..e91c6e0a 100644 --- 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 index 26284437..4d1c3ad6 100644 --- 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 index 373fa7f1..6cb3697f 100644 --- a/templates/webpack.vue.js +++ b/templates/webpack.vue.js @@ -16,10 +16,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) { @@ -61,11 +62,10 @@ module.exports = env => { const appFullPath = resolve(projectRoot, appPath); const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot }); let coreModulesPackageName = "tns-core-modules"; - const alias = { - '~': appFullPath, - '@': appFullPath, - 'vue': 'nativescript-vue' - }; + const alias = env.alias || {}; + alias['~'] = appFullPath; + alias['@'] = appFullPath; + alias['vue'] = 'nativescript-vue'; if (hasRootLevelScopedModules) { coreModulesPackageName = "@nativescript/core"; @@ -76,7 +76,9 @@ module.exports = env => { const entryModule = nsWebpack.getEntryModule(appFullPath, platform); 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"; From 26d40927fc2e6e3fd7f67f9aba2b76d0b8ed51ee Mon Sep 17 00:00:00 2001 From: rosen-vladimirov Date: Tue, 21 Jan 2020 08:44:19 +0200 Subject: [PATCH 2/2] chore: remove webpack.config.js files from demo apps As the demo apps are now using custom webpack.config.js files, they no longer need the default webpack.config.js files. They'll be managed by the installation of nativescript-dev-webpack --- demo/.gitignore | 3 +- demo/AngularApp/webpack.config.js | 356 --------------------------- demo/JavaScriptApp/webpack.config.js | 279 --------------------- demo/TypeScriptApp/webpack.config.js | 311 ----------------------- 4 files changed, 2 insertions(+), 947 deletions(-) delete mode 100644 demo/AngularApp/webpack.config.js delete mode 100644 demo/JavaScriptApp/webpack.config.js delete mode 100644 demo/TypeScriptApp/webpack.config.js diff --git a/demo/.gitignore b/demo/.gitignore index ee19ca4e..f8679d9c 100644 --- a/demo/.gitignore +++ b/demo/.gitignore @@ -17,4 +17,5 @@ vendor.js vendor.ts tsconfig.esm.json -mochawesome-report \ No newline at end of file +mochawesome-report +webpack.config.js \ No newline at end of file diff --git a/demo/AngularApp/webpack.config.js b/demo/AngularApp/webpack.config.js deleted file mode 100644 index 64d67979..00000000 --- a/demo/AngularApp/webpack.config.js +++ /dev/null @@ -1,356 +0,0 @@ -const { join, relative, resolve, sep, dirname } = require("path"); - -const webpack = require("webpack"); -const nsWebpack = require("nativescript-dev-webpack"); -const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target"); -const { nsReplaceBootstrap } = require("nativescript-dev-webpack/transformers/ns-replace-bootstrap"); -const { nsReplaceLazyLoader } = require("nativescript-dev-webpack/transformers/ns-replace-lazy-loader"); -const { nsSupportHmrNg } = require("nativescript-dev-webpack/transformers/ns-support-hmr-ng"); -const { getMainModulePath } = require("nativescript-dev-webpack/utils/ast-utils"); -const { getNoEmitOnErrorFromTSConfig, getCompilerOptionsFromTSConfig } = require("nativescript-dev-webpack/utils/tsconfig-utils"); -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"); -const TerserPlugin = require("terser-webpack-plugin"); -const { getAngularCompilerPlugin } = require("nativescript-dev-webpack/plugins/NativeScriptAngularCompilerPlugin"); -const hashSalt = Date.now().toString(); - -module.exports = env => { - // Add your custom Activities, Services and other Android app components here. - 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) { - throw new Error("You need to provide a target platform!"); - } - - const AngularCompilerPlugin = getAngularCompilerPlugin(platform); - const projectRoot = __dirname; - - // Default destination inside platforms//... - const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot)); - - const { - // The 'appPath' and 'appResourcesPath' values are fetched from - // the nsconfig.json configuration file. - appPath = "src", - appResourcesPath = "App_Resources", - - // You can provide the following flags when running 'tns run android|ios' - aot, // --env.aot - snapshot, // --env.snapshot, - production, // --env.production - uglify, // --env.uglify - report, // --env.report - sourceMap, // --env.sourceMap - hiddenSourceMap, // --env.hiddenSourceMap - hmr, // --env.hmr, - unitTesting, // --env.unitTesting - verbose, // --env.verbose - snapshotInDocker, // --env.snapshotInDocker - skipSnapshotTools, // --env.skipSnapshotTools - compileSnapshot // --env.compileSnapshot - } = env; - - const useLibs = compileSnapshot; - const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap; - const externals = nsWebpack.getConvertedExternals(env.externals); - const appFullPath = resolve(projectRoot, appPath); - const tsConfigName = "tsconfig.tns.json"; - const tsConfigPath = join(__dirname, tsConfigName); - const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot }); - const hasRootLevelScopedAngular = nsWebpack.hasRootLevelScopedAngular({ projectDir: projectRoot }); - let coreModulesPackageName = "tns-core-modules"; - const alias = env.alias || {}; - alias['~'] = appFullPath; - - const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath); - if (hasRootLevelScopedModules) { - coreModulesPackageName = "@nativescript/core"; - alias["tns-core-modules"] = coreModulesPackageName; - nsWebpack.processTsPathsForScopedModules({ compilerOptions }); - } - - if (hasRootLevelScopedAngular) { - alias["nativescript-angular"] = "@nativescript/angular"; - nsWebpack.processTsPathsForScopedAngular({ compilerOptions }); - } - - const appResourcesFullPath = resolve(projectRoot, appResourcesPath); - const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`; - const entryPath = `.${sep}${entryModule}`; - 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"; - }; - - const ngCompilerTransformers = []; - const additionalLazyModuleResources = []; - if (aot) { - ngCompilerTransformers.push(nsReplaceBootstrap); - } - - if (hmr) { - ngCompilerTransformers.push(nsSupportHmrNg); - } - - // when "@angular/core" is external, it's not included in the bundles. In this way, it will be used - // directly from node_modules and the Angular modules loader won't be able to resolve the lazy routes - // fixes https://github.com/NativeScript/nativescript-cli/issues/4024 - if (env.externals && env.externals.indexOf("@angular/core") > -1) { - const appModuleRelativePath = getMainModulePath(resolve(appFullPath, entryModule), tsConfigName); - if (appModuleRelativePath) { - const appModuleFolderPath = dirname(resolve(appFullPath, appModuleRelativePath)); - // include the lazy loader inside app module - ngCompilerTransformers.push(nsReplaceLazyLoader); - // include the new lazy loader path in the allowed ones - additionalLazyModuleResources.push(appModuleFolderPath); - } - } - - const ngCompilerPlugin = new AngularCompilerPlugin({ - hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]), - platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule), projectRoot)), - mainPath: join(appFullPath, entryModule), - tsConfigPath, - skipCodeGeneration: !aot, - sourceMap: !!isAnySourceMapEnabled, - additionalLazyModuleResources: additionalLazyModuleResources, - compilerOptions: { paths: compilerOptions.paths } - }); - - 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")}`); - } - - const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(join(projectRoot, tsConfigName)); - - nsWebpack.processAppComponents(appComponents, platform); - const config = { - mode: production ? "production" : "development", - context: appFullPath, - externals, - watchOptions: { - ignored: [ - appResourcesFullPath, - // Don't watch hidden files - "**/.*", - ] - }, - target: nativescriptTarget, - entry: entries, - output: { - pathinfo: false, - path: dist, - sourceMapFilename, - libraryTarget: "commonjs2", - filename: "[name].js", - globalObject: "global", - hashSalt - }, - resolve: { - extensions: [".ts", ".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", - ], - alias, - symlinks: true - }, - resolveLoader: { - symlinks: false - }, - node: { - // Disable node shims that conflict with NativeScript - "http": false, - "timers": false, - "setImmediate": false, - "fs": "empty", - "__dirname": false, - }, - devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"), - optimization: { - runtimeChunk: "single", - noEmitOnErrors: noEmitOnErrorFromTSConfig, - splitChunks: { - cacheGroups: { - vendor: { - name: "vendor", - chunks: "all", - test: (module, chunks) => { - const moduleName = module.nameForCondition ? module.nameForCondition() : ''; - return /[\\/]node_modules[\\/]/.test(moduleName) || - appComponents.some(comp => comp === moduleName); - }, - enforce: true, - }, - } - }, - minimize: !!uglify, - minimizer: [ - new TerserPlugin({ - parallel: true, - cache: true, - sourceMap: isAnySourceMapEnabled, - terserOptions: { - output: { - comments: false, - semicolons: !isAnySourceMapEnabled - }, - compress: { - // The Android SBG has problems parsing the output - // when these options are enabled - 'collapse_vars': platform !== "android", - sequences: platform !== "android", - } - } - }) - ], - }, - module: { - rules: [ - { - include: join(appFullPath, entryPath), - use: [ - // Require all Android app components - platform === "android" && { - loader: "nativescript-dev-webpack/android-app-components-loader", - options: { modules: appComponents } - }, - - { - loader: "nativescript-dev-webpack/bundle-config-loader", - options: { - angular: true, - loadCss: !snapshot, // load the application css if in debug mode - unitTesting, - appFullPath, - projectRoot, - ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform) - } - }, - ].filter(loader => !!loader) - }, - - { test: /\.html$|\.xml$/, use: "raw-loader" }, - - { - test: /[\/|\\]app\.css$/, - use: [ - "nativescript-dev-webpack/style-hot-loader", - { - loader: "nativescript-dev-webpack/css2json-loader", - options: { useForImports: true } - } - ] - }, - { - test: /[\/|\\]app\.scss$/, - use: [ - "nativescript-dev-webpack/style-hot-loader", - { - loader: "nativescript-dev-webpack/css2json-loader", - options: { useForImports: true } - }, - "sass-loader" - ] - }, - - // Angular components reference css files and their imports using raw-loader - { test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: "raw-loader" }, - { test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] }, - - { - test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, - use: [ - "nativescript-dev-webpack/moduleid-compat-loader", - "nativescript-dev-webpack/lazy-ngmodule-hot-loader", - "@ngtools/webpack", - ] - }, - - // Mark files inside `@angular/core` as using SystemJS style dynamic imports. - // Removing this will cause deprecation warnings to appear. - { - test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/, - parser: { system: true }, - }, - ], - }, - plugins: [ - // Define useful constants like TNS_WEBPACK - new webpack.DefinePlugin({ - "global.TNS_WEBPACK": "true", - "process": "global.process", - }), - // Remove all files from the out dir. - new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }), - // Copy assets to out dir. Add your own globs as needed. - new CopyWebpackPlugin([ - { from: { glob: "fonts/**" } }, - { from: { glob: "**/*.jpg" } }, - { from: { glob: "**/*.png" } }, - ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }), - new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"), - // For instructions on how to set up workers with webpack - // check out https://github.com/nativescript/worker-loader - new NativeScriptWorkerPlugin(), - ngCompilerPlugin, - // Does IPC communication with the {N} CLI to notify events when running in watch mode. - new nsWebpack.WatchStateLoggerPlugin(), - ], - }; - - 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`), - })); - } - - if (snapshot) { - config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({ - chunk: "vendor", - angular: true, - requireModules: [ - "reflect-metadata", - "@angular/platform-browser", - "@angular/core", - "@angular/common", - "@angular/router", - "nativescript-angular/platform-static", - "nativescript-angular/router", - ], - projectRoot, - webpackConfig: config, - snapshotInDocker, - skipSnapshotTools, - useLibs - })); - } - - if (hmr) { - config.plugins.push(new webpack.HotModuleReplacementPlugin()); - } - - return config; -}; diff --git a/demo/JavaScriptApp/webpack.config.js b/demo/JavaScriptApp/webpack.config.js deleted file mode 100644 index e91c6e0a..00000000 --- a/demo/JavaScriptApp/webpack.config.js +++ /dev/null @@ -1,279 +0,0 @@ -const { join, relative, resolve, sep } = 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"); -const TerserPlugin = require("terser-webpack-plugin"); -const hashSalt = Date.now().toString(); - -module.exports = env => { - // Add your custom Activities, Services and other android app components here. - 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) { - throw new Error("You need to provide a target platform!"); - } - - const platforms = ["ios", "android"]; - const projectRoot = __dirname; - - // Default destination inside platforms//... - const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot)); - - const { - // The 'appPath' and 'appResourcesPath' values are fetched from - // the nsconfig.json configuration file. - appPath = "app", - appResourcesPath = "app/App_Resources", - - // You can provide the following flags when running 'tns run android|ios' - snapshot, // --env.snapshot - production, // --env.production - uglify, // --env.uglify - report, // --env.report - sourceMap, // --env.sourceMap - hiddenSourceMap, // --env.hiddenSourceMap - hmr, // --env.hmr, - unitTesting, // --env.unitTesting, - verbose, // --env.verbose - snapshotInDocker, // --env.snapshotInDocker - skipSnapshotTools, // --env.skipSnapshotTools - compileSnapshot // --env.compileSnapshot - } = env; - - const useLibs = compileSnapshot; - const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap; - const externals = nsWebpack.getConvertedExternals(env.externals); - const appFullPath = resolve(projectRoot, appPath); - const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot }); - let coreModulesPackageName = "tns-core-modules"; - const alias = env.alias || {}; - alias['~'] = appFullPath; - - if (hasRootLevelScopedModules) { - coreModulesPackageName = "@nativescript/core"; - alias["tns-core-modules"] = coreModulesPackageName; - } - const appResourcesFullPath = resolve(projectRoot, appResourcesPath); - - const entryModule = nsWebpack.getEntryModule(appFullPath, platform); - const entryPath = `.${sep}${entryModule}.js`; - 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"; - }; - - 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")}`); - } - - - nsWebpack.processAppComponents(appComponents, platform); - const config = { - mode: production ? "production" : "development", - context: appFullPath, - externals, - watchOptions: { - ignored: [ - appResourcesFullPath, - // Don't watch hidden files - "**/.*", - ] - }, - target: nativescriptTarget, - entry: entries, - output: { - pathinfo: false, - path: dist, - sourceMapFilename, - libraryTarget: "commonjs2", - filename: "[name].js", - globalObject: "global", - hashSalt - }, - resolve: { - 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", - ], - alias, - // resolve symlinks to symlinked modules - symlinks: true - }, - resolveLoader: { - // don't resolve symlinks to symlinked loaders - symlinks: false - }, - node: { - // Disable node shims that conflict with NativeScript - "http": false, - "timers": false, - "setImmediate": false, - "fs": "empty", - "__dirname": false, - }, - devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"), - optimization: { - runtimeChunk: "single", - noEmitOnErrors: true, - splitChunks: { - cacheGroups: { - vendor: { - name: "vendor", - chunks: "all", - test: (module, chunks) => { - const moduleName = module.nameForCondition ? module.nameForCondition() : ''; - return /[\\/]node_modules[\\/]/.test(moduleName) || - appComponents.some(comp => comp === moduleName); - - }, - enforce: true, - }, - } - }, - minimize: !!uglify, - minimizer: [ - new TerserPlugin({ - parallel: true, - cache: true, - sourceMap: isAnySourceMapEnabled, - terserOptions: { - output: { - comments: false, - semicolons: !isAnySourceMapEnabled - }, - compress: { - // The Android SBG has problems parsing the output - // when these options are enabled - 'collapse_vars': platform !== "android", - sequences: platform !== "android", - } - } - }) - ], - }, - module: { - rules: [ - { - include: join(appFullPath, entryPath), - use: [ - // Require all Android app components - platform === "android" && { - loader: "nativescript-dev-webpack/android-app-components-loader", - options: { modules: appComponents } - }, - - { - loader: "nativescript-dev-webpack/bundle-config-loader", - options: { - loadCss: !snapshot, // load the application css if in debug mode - unitTesting, - appFullPath, - projectRoot, - ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform) - } - }, - ].filter(loader => !!loader) - }, - - { - test: /\.(js|css|scss|html|xml)$/, - use: "nativescript-dev-webpack/hmr/hot-loader" - }, - - { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" }, - - { - test: /\.css$/, - use: "nativescript-dev-webpack/css2json-loader" - }, - - { - test: /\.scss$/, - use: [ - "nativescript-dev-webpack/css2json-loader", - "sass-loader" - ] - }, - ] - }, - plugins: [ - // Define useful constants like TNS_WEBPACK - new webpack.DefinePlugin({ - "global.TNS_WEBPACK": "true", - "process": "global.process", - }), - // Remove all files from the out dir. - new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }), - // Copy assets to out dir. Add your own globs as needed. - new CopyWebpackPlugin([ - { from: { glob: "fonts/**" } }, - { from: { glob: "**/*.jpg" } }, - { from: { glob: "**/*.png" } }, - ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }), - new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"), - - // For instructions on how to set up workers with webpack - // check out https://github.com/nativescript/worker-loader - new NativeScriptWorkerPlugin(), - new nsWebpack.PlatformFSPlugin({ - platform, - platforms, - }), - // Does IPC communication with the {N} CLI to notify events when running in watch mode. - new nsWebpack.WatchStateLoggerPlugin() - ], - }; - - 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`), - })); - } - - if (snapshot) { - config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({ - chunk: "vendor", - requireModules: [ - "tns-core-modules/bundle-entry-points", - ], - projectRoot, - webpackConfig: config, - snapshotInDocker, - skipSnapshotTools, - useLibs - })); - } - - if (hmr) { - config.plugins.push(new webpack.HotModuleReplacementPlugin()); - } - - - return config; -}; diff --git a/demo/TypeScriptApp/webpack.config.js b/demo/TypeScriptApp/webpack.config.js deleted file mode 100644 index 4d1c3ad6..00000000 --- a/demo/TypeScriptApp/webpack.config.js +++ /dev/null @@ -1,311 +0,0 @@ -const { join, relative, resolve, sep } = require("path"); - -const webpack = require("webpack"); -const nsWebpack = require("nativescript-dev-webpack"); -const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target"); -const { getNoEmitOnErrorFromTSConfig } = require("nativescript-dev-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 hashSalt = Date.now().toString(); - -module.exports = env => { - // Add your custom Activities, Services and other Android app components here. - 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) { - throw new Error("You need to provide a target platform!"); - } - - const platforms = ["ios", "android"]; - const projectRoot = __dirname; - - // Default destination inside platforms//... - const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot)); - - const { - // The 'appPath' and 'appResourcesPath' values are fetched from - // the nsconfig.json configuration file. - appPath = "app", - appResourcesPath = "app/App_Resources", - - // You can provide the following flags when running 'tns run android|ios' - snapshot, // --env.snapshot - production, // --env.production - uglify, // --env.uglify - report, // --env.report - sourceMap, // --env.sourceMap - hiddenSourceMap, // --env.hiddenSourceMap - hmr, // --env.hmr, - unitTesting, // --env.unitTesting, - verbose, // --env.verbose - snapshotInDocker, // --env.snapshotInDocker - skipSnapshotTools, // --env.skipSnapshotTools - compileSnapshot // --env.compileSnapshot - } = env; - - const useLibs = compileSnapshot; - const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap; - const externals = nsWebpack.getConvertedExternals(env.externals); - - const appFullPath = resolve(projectRoot, appPath); - const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot }); - let coreModulesPackageName = "tns-core-modules"; - const alias = env.alias || {}; - alias['~'] = appFullPath; - - if (hasRootLevelScopedModules) { - coreModulesPackageName = "@nativescript/core"; - alias["tns-core-modules"] = coreModulesPackageName; - } - const appResourcesFullPath = resolve(projectRoot, appResourcesPath); - - const entryModule = nsWebpack.getEntryModule(appFullPath, platform); - const entryPath = `.${sep}${entryModule}.ts`; - const entries = env.entries || {}; - entries.bundle = entryPath; - - const tsConfigPath = resolve(projectRoot, "tsconfig.tns.json"); - - 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"; - }; - - 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")}`); - } - - const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(tsConfigPath); - - nsWebpack.processAppComponents(appComponents, platform); - const config = { - mode: production ? "production" : "development", - context: appFullPath, - externals, - watchOptions: { - ignored: [ - appResourcesFullPath, - // Don't watch hidden files - "**/.*", - ] - }, - target: nativescriptTarget, - entry: entries, - output: { - pathinfo: false, - path: dist, - sourceMapFilename, - libraryTarget: "commonjs2", - filename: "[name].js", - globalObject: "global", - hashSalt - }, - resolve: { - extensions: [".ts", ".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", - ], - alias, - // resolve symlinks to symlinked modules - symlinks: true - }, - resolveLoader: { - // don't resolve symlinks to symlinked loaders - symlinks: false - }, - node: { - // Disable node shims that conflict with NativeScript - "http": false, - "timers": false, - "setImmediate": false, - "fs": "empty", - "__dirname": false, - }, - devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"), - optimization: { - runtimeChunk: "single", - noEmitOnErrors: noEmitOnErrorFromTSConfig, - splitChunks: { - cacheGroups: { - vendor: { - name: "vendor", - chunks: "all", - test: (module, chunks) => { - const moduleName = module.nameForCondition ? module.nameForCondition() : ''; - return /[\\/]node_modules[\\/]/.test(moduleName) || - appComponents.some(comp => comp === moduleName); - - }, - enforce: true, - }, - } - }, - minimize: !!uglify, - minimizer: [ - new TerserPlugin({ - parallel: true, - cache: true, - sourceMap: isAnySourceMapEnabled, - terserOptions: { - output: { - comments: false, - semicolons: !isAnySourceMapEnabled - }, - compress: { - // The Android SBG has problems parsing the output - // when these options are enabled - 'collapse_vars': platform !== "android", - sequences: platform !== "android", - } - } - }) - ], - }, - module: { - rules: [ - { - include: join(appFullPath, entryPath), - use: [ - // Require all Android app components - platform === "android" && { - loader: "nativescript-dev-webpack/android-app-components-loader", - options: { modules: appComponents } - }, - - { - loader: "nativescript-dev-webpack/bundle-config-loader", - options: { - loadCss: !snapshot, // load the application css if in debug mode - unitTesting, - appFullPath, - projectRoot, - ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform) - } - }, - ].filter(loader => !!loader) - }, - - { - test: /\.(ts|css|scss|html|xml)$/, - use: "nativescript-dev-webpack/hmr/hot-loader" - }, - - { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" }, - - { - test: /\.css$/, - use: "nativescript-dev-webpack/css2json-loader" - }, - - { - test: /\.scss$/, - use: [ - "nativescript-dev-webpack/css2json-loader", - "sass-loader" - ] - }, - - { - test: /\.ts$/, - use: { - loader: "ts-loader", - options: { - configFile: tsConfigPath, - // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds - // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement - transpileOnly: true, - allowTsInNodeModules: true, - compilerOptions: { - sourceMap: isAnySourceMapEnabled, - declaration: false - } - }, - } - }, - ] - }, - plugins: [ - // Define useful constants like TNS_WEBPACK - new webpack.DefinePlugin({ - "global.TNS_WEBPACK": "true", - "process": "global.process", - }), - // Remove all files from the out dir. - new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }), - // Copy assets to out dir. Add your own globs as needed. - new CopyWebpackPlugin([ - { from: { glob: "fonts/**" } }, - { from: { glob: "**/*.jpg" } }, - { from: { glob: "**/*.png" } }, - ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }), - new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"), - // For instructions on how to set up workers with webpack - // check out https://github.com/nativescript/worker-loader - new NativeScriptWorkerPlugin(), - new nsWebpack.PlatformFSPlugin({ - platform, - platforms, - }), - // Does IPC communication with the {N} CLI to notify events when running in watch mode. - new nsWebpack.WatchStateLoggerPlugin(), - // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds - // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement - new ForkTsCheckerWebpackPlugin({ - tsconfig: tsConfigPath, - async: false, - useTypescriptIncrementalApi: true, - checkSyntacticErrors: true, - memoryLimit: 4096 - }) - ], - }; - - 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`), - })); - } - - if (snapshot) { - config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({ - chunk: "vendor", - requireModules: [ - "tns-core-modules/bundle-entry-points", - ], - projectRoot, - webpackConfig: config, - snapshotInDocker, - skipSnapshotTools, - useLibs - })); - } - - if (hmr) { - config.plugins.push(new webpack.HotModuleReplacementPlugin()); - } - - - return config; -};