Merge pull request #15 from NickIliev/niliev/webpack-update

chore: using next versions + update webpack.config.js
NickIliev · Apr 10, 2019 · 812917e · 812917e
2 parents 41589fa + 6818103
commit 812917e
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -1,24 +1,29 @@
-# The Cosmos Databank Applicaiton
+# The Cosmos Databank Application
 POC application powered by NativeScript + Angular-2 and using Angular HTTP and NASA API.
 
 [Install Cosmos Databank from Google Play Store](https://play.google.com/store/apps/details?id=org.nativescript.curiosity&hl=bg) or use the instructions below to create a local build.
 
 Main sections:
 
-- Astronomical Photo of the Day (APOD).
+- **Astronomical Photo of the Day (APOD).**
 
 Daily selection of great astronomical photos.
 
-- Asteroids Proximity Checker.
+- **Asteroids Proximity Checker.**
 
 Weekly list of the closest known asteroids orbiting near the Earth.
 
-- Mars Rovers Photo Gallery.
+- **Mars Rovers Photo Gallery.**
 
 Over 500k (five hundred thousand!) photos made from Opportunty, Spirit and Curiosity rovers of the Mars environment.
 
+- **Hubble News Feed**
+
+Astronomical news feed from the Hubble space telescope.
+
+
 ## Requirements
-- NativeScript 3.x.x.
+- NativeScript 5.x.x.
 - Android (API 19 and above) or iOS device or emulator.
 
 ## Instructions

diff --git a/package.json b/package.json
@@ -5,11 +5,11 @@
     "repository": "<fill-your-repository-here>",
     "nativescript": {
         "id": "org.nativescript.curiosity",
-        "tns-android": {
-            "version": "5.3.0"
-        },
         "tns-ios": {
-            "version": "5.3.0"
+            "version": "5.4.0-2019-04-03-180044-02"
+        },
+        "tns-android": {
+            "version": "5.4.0-2019-04-08-180559-01"
         }
     },
     "dependencies": {
@@ -22,17 +22,17 @@
         "@angular/platform-browser": "~7.2.0",
         "@angular/platform-browser-dynamic": "~7.2.0",
         "@angular/router": "~7.2.0",
-        "nativescript-angular": "7.2.3",
+        "nativescript-angular": "next",
         "nativescript-app-center": "^1.0.3",
         "nativescript-cardview": "^3.1.1",
-        "nativescript-permissions": "^1.2.3",
+        "nativescript-permissions": "^1.3.5",
         "nativescript-plugin-firebase": "^8.1.1",
         "nativescript-social-share": "^1.5.1",
         "nativescript-theme-core": "^1.0.4",
         "nativescript-ui-sidedrawer": "^6.0.0",
         "reflect-metadata": "~0.1.13",
         "rxjs": "^6.4.0",
-        "tns-core-modules": "^5.3.1",
+        "tns-core-modules": "next",
         "zone.js": "^0.8.4"
     },
     "devDependencies": {
@@ -46,8 +46,8 @@
         "mocha-junit-reporter": "~1.17.0",
         "mocha-multi": "~1.0.0",
         "nativescript-dev-appium": "^5.1.0",
-        "nativescript-dev-typescript": "~0.9.0",
-        "nativescript-dev-webpack": "~0.21.0",
+        "nativescript-dev-typescript": "next",
+        "nativescript-dev-webpack": "next",
         "tns-platform-declarations": "~5.3.1",
         "tslint": "^5.11.0",
         "typescript": "3.1.1"

diff --git a/webpack.config.js b/webpack.config.js
@@ -5,13 +5,15 @@ 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 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 UglifyJsPlugin = require("uglifyjs-webpack-plugin");
-const { AngularCompilerPlugin } = require("@ngtools/webpack");
+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.
@@ -25,6 +27,7 @@ module.exports = env => {
         throw new Error("You need to provide a target platform!");
     }
 
+    const AngularCompilerPlugin = getAngularCompilerPlugin(platform);
     const projectRoot = __dirname;
 
     // Default destination inside platforms/<platform>/...
@@ -45,28 +48,35 @@ module.exports = env => {
         report, // --env.report
         sourceMap, // --env.sourceMap
         hmr, // --env.hmr,
+        unitTesting, // --env.unitTesting
     } = env;
-    env.externals = env.externals || [];
-    const externals = (env.externals).map((e) => { // --env.externals
-        return new RegExp(e + ".*");
-    });
 
+    const externals = nsWebpack.getConvertedExternals(env.externals);
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
-
-    const entryModule = `${nsWebpack.getEntryModule(appFullPath)}.ts`;
+    const tsConfigName = "tsconfig.tns.json";
+    const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`;
     const entryPath = `.${sep}${entryModule}`;
+    const entries = { bundle: entryPath };
+    if (platform === "ios") {
+        entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules.js";
+    };
+
     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.indexOf("@angular/core") > -1) {
-        const appModuleRelativePath = getMainModulePath(resolve(appFullPath, entryModule));
+    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
@@ -78,9 +88,9 @@ module.exports = env => {
 
     const ngCompilerPlugin = new AngularCompilerPlugin({
         hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]),
-        platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin)),
+        platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule))),
         mainPath: resolve(appPath, entryModule),
-        tsConfigPath: join(__dirname, "tsconfig.tns.json"),
+        tsConfigPath: join(__dirname, tsConfigName),
         skipCodeGeneration: !aot,
         sourceMap: !!sourceMap,
         additionalLazyModuleResources: additionalLazyModuleResources
@@ -98,15 +108,14 @@ module.exports = env => {
             ]
         },
         target: nativescriptTarget,
-        entry: {
-            bundle: entryPath,
-        },
+        entry: entries,
         output: {
             pathinfo: false,
             path: dist,
             libraryTarget: "commonjs2",
             filename: "[name].js",
             globalObject: "global",
+            hashSalt
         },
         resolve: {
             extensions: [".ts", ".js", ".scss", ".css"],
@@ -135,6 +144,7 @@ module.exports = env => {
         },
         devtool: sourceMap ? "inline-source-map" : "none",
         optimization: {
+            runtimeChunk: "single",
             splitChunks: {
                 cacheGroups: {
                     vendor: {
@@ -154,6 +164,7 @@ module.exports = env => {
                 new UglifyJsPlugin({
                     parallel: true,
                     cache: true,
+                    sourceMap: !!sourceMap,
                     uglifyOptions: {
                         output: {
                             comments: false,
@@ -171,7 +182,7 @@ module.exports = env => {
         module: {
             rules: [
                 {
-                    test: new RegExp(entryPath),
+                    test: nsWebpack.getEntryPathRegExp(appFullPath, entryPath),
                     use: [
                         // Require all Android app components
                         platform === "android" && {
@@ -184,6 +195,9 @@ module.exports = env => {
                             options: {
                                 angular: true,
                                 loadCss: !snapshot, // load the application css if in debug mode
+                                unitTesting,
+                                appFullPath,
+                                projectRoot,
                             }
                         },
                     ].filter(loader => !!loader)
@@ -196,14 +210,14 @@ module.exports = env => {
                     test: /[\/|\\]app\.css$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { minimize: false, url: false } }
+                        { loader: "css-loader", options: { url: false } }
                     ]
                 },
                 {
                     test: /[\/|\\]app\.scss$/,
                     use: [
                         "nativescript-dev-webpack/style-hot-loader",
-                        { loader: "css-loader", options: { minimize: false, url: false } },
+                        { loader: "css-loader", options: { url: false } },
                         "sass-loader"
                     ]
                 },
@@ -237,14 +251,6 @@ module.exports = env => {
             }),
             // Remove all files from the out dir.
             new CleanWebpackPlugin([`${dist}/**/*`]),
-            // Copy native app resources to out dir.
-            new CopyWebpackPlugin([
-                {
-                    from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
-                    to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
-                    context: projectRoot
-                },
-            ]),
             // Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
                 { from: { glob: "settings.json"} },
@@ -253,10 +259,16 @@ module.exports = env => {
                 { from: { glob: "**/*.png" } },
             ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
             // Generate a bundle starter script and activate it in package.json
-            new nsWebpack.GenerateBundleStarterPlugin([
-                "./vendor",
-                "./bundle",
-            ]),
+            new nsWebpack.GenerateBundleStarterPlugin(
+                // Don't include `runtime.js` when creating a snapshot. The plugin
+                // configures the WebPack runtime to be generated inside the snapshot
+                // module and no `runtime.js` module exist.
+                (snapshot ? [] : ["./runtime"])
+                    .concat([
+                        "./vendor",
+                        "./bundle",
+                    ])
+            ),
             // For instructions on how to set up workers with webpack
             // check out https://github.com/nativescript/worker-loader
             new NativeScriptWorkerPlugin(),
@@ -266,6 +278,18 @@ module.exports = env => {
         ],
     };
 
+    // Copy the native app resources to the out dir
+    // only if doing a full build (tns run/build) and not previewing (tns preview)
+    if (!externals || externals.length === 0) {
+        config.plugins.push(new CopyWebpackPlugin([
+            {
+                from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
+                to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
+                context: projectRoot
+            },
+        ]));
+    }
+
 
     if (report) {
         // Generate report files for bundles content
@@ -301,4 +325,4 @@ module.exports = env => {
     }
 
     return config;
-};
+};