Webpack 4 improvements

bundle-config-loader.js

@@ -0,0 +1,21 @@
+module.exports = function(source) {
+    this.cacheable();
+    const { registerPages, loadCss } = this.query;
+
+    if (registerPages) {
+        source = `
+            require("nativescript-dev-webpack/register-modules");
+            ${source}
+        `;
+    }
+
+    if (loadCss) {
+        source = `
+            require("nativescript-dev-webpack/load-application-css");
+            ${source}
+        `;
+    }
+
+    this.callback(null, source);
+};
+

demo/JavaScriptApp/app/app.js

@@ -4,7 +4,6 @@ You can use this file to perform app-level initialization, but the primary
 purpose of the file is to pass control to the app’s first module.
 */
 
-require("./bundle-config");
 var application = require("application");
 
 application.start({ moduleName: "main-page" });

demo/TypeScriptApp/app/app.ts

@@ -4,7 +4,6 @@ You can use this file to perform app-level initialization, but the primary
 purpose of the file is to pass control to the app’s first module.
 */
 
-import "./bundle-config";
 import * as app from 'application';
 
 app.start({ moduleName: 'main-page' });

demo/TypeScriptApp/tsconfig.json

@@ -15,6 +15,9 @@
             "*": [
                 "./node_modules/tns-core-modules/*",
                 "./node_modules/*"
+            ],
+            "~/*": [
+                "app/*"
             ]
         }
     },

index.js

@@ -32,9 +32,6 @@ exports.getAotEntryModule = function (appDirectory) {
     return aotEntry;
 }
 
-// Exported for backwards compatibility with {N} 3
-exports.uglifyMangleExcludes = require("./mangle-excludes");
-
 exports.getEntryModule = function (appDirectory) {
 	verifyEntryModuleDirectory(appDirectory);
 

installer.js

@@ -4,10 +4,9 @@ const dependencyManager = require("./dependencyManager");
 
 function install() {
     const projectDir = helpers.getProjectDir();
-    const appPath = helpers.getAppPath();
     const packageJson = helpers.getPackageJson(projectDir);
 
-    projectFilesManager.addProjectFiles(projectDir, appPath);
+    projectFilesManager.addProjectFiles(projectDir);
 
     const postinstallOptions = dependencyManager.addProjectDeps(packageJson);
     packageJson.devDependencies = postinstallOptions.deps;
@@ -19,8 +18,7 @@ function install() {
 
 function uninstall() {
     const projectDir = helpers.getProjectDir();
-    const appPath = helpers.getAppPath();
-    projectFilesManager.removeProjectFiles(projectDir, appPath);
+    projectFilesManager.removeProjectFiles(projectDir);
 
     console.log("NativeScript Webpack removed!");
 }

templates/vendor.nativescript.ts → load-application-css.js

@@ -1,8 +1,6 @@
-// Snapshot the ~/app.css and the theme
 const application = require("application");
 require("ui/styling/style-scope");
 const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sass)$/);
 global.registerWebpackModules(appCssContext);
 application.loadAppCss();
 
-require("bundle-entry-points");

plugins/NativeScriptSnapshotPlugin/index.js

@@ -1,28 +1,62 @@
-const { resolve, join } = require("path");
-const { closeSync, openSync } = require("fs");
+const { relative, resolve, join } = require("path");
+const { closeSync, openSync, writeFileSync } = require("fs");
 const validateOptions = require("schema-utils");
 
 const ProjectSnapshotGenerator = require("../../snapshot/android/project-snapshot-generator");
-const { resolveAndroidAppPath } = require("../../projectHelpers");
+const { resolveAndroidAppPath, getAndroidProjectPath } = require("../../projectHelpers");
 const schema = require("./options.json");
 
+const SNAPSHOT_ENTRY_NAME = "snapshot-entry";
+const SNAPSHOT_ENTRY_MODULE = `${SNAPSHOT_ENTRY_NAME}.js`;
+
 exports.NativeScriptSnapshotPlugin = (function() {
     function NativeScriptSnapshotPlugin(options) {
         NativeScriptSnapshotPlugin.validateSchema(options);
-        if (options.chunk) {
-            options.chunks = options.chunks || [];
-            options.chunks.push(options.chunk);
-        }
 
         ProjectSnapshotGenerator.call(this, options);
 
-        if (this.options.webpackConfig) {
-            if (this.options.webpackConfig.output && this.options.webpackConfig.output.libraryTarget) {
-                this.options.webpackConfig.output.libraryTarget = undefined;
-            }
+        const { webpackConfig } = this.options;
+        NativeScriptSnapshotPlugin.removeLibraryTarget(webpackConfig);
+
+        const { entry } = webpackConfig;
+        if (typeof entry === "string" || Array.isArray(entry)) {
+            webpackConfig.entry = { bundle: entry };
+        }
+
+        NativeScriptSnapshotPlugin.ensureSnapshotModuleEntry(this.options);
+    }
+
+    NativeScriptSnapshotPlugin.removeLibraryTarget = function(webpackConfig) {
+        const { output } = webpackConfig;
+        if (output) {
+            output.libraryTarget = undefined;
         }
     }
 
+    NativeScriptSnapshotPlugin.ensureSnapshotModuleEntry = function(options) {
+        const { webpackConfig, requireModules, chunks, projectRoot, includeApplicationCss } = options;
+
+        const androidProjectPath = getAndroidProjectPath({ projectRoot: projectRoot });
+        const snapshotEntryPath = join(androidProjectPath, SNAPSHOT_ENTRY_MODULE);
+
+        let snapshotEntryContent = "";
+        if (includeApplicationCss) {
+            snapshotEntryContent += `require("nativescript-dev-webpack/load-application-css");`;
+        }
+        snapshotEntryContent += requireModules.map(mod => `require('${mod}')`).join(";");
+
+        writeFileSync(snapshotEntryPath, snapshotEntryContent, { encoding: "utf8" });
+
+        // add the module to the entry points to make sure it's content is evaluated
+        webpackConfig.entry[SNAPSHOT_ENTRY_NAME] = relative(webpackConfig.context, snapshotEntryPath);
+
+        // prepend the module to the script that will be snapshotted
+        chunks.unshift(SNAPSHOT_ENTRY_NAME);
+
+        // ensure that the runtime is installed only in the snapshotted chunk
+        webpackConfig.optimization.runtimeChunk = { name: SNAPSHOT_ENTRY_NAME };
+    }
+
     NativeScriptSnapshotPlugin.validateSchema = function(options) {
         if (!options.chunk && !options.chunks) {
             const error = NativeScriptSnapshotPlugin.extendError({ message: `No chunks specified!` });
@@ -31,12 +65,16 @@ exports.NativeScriptSnapshotPlugin = (function() {
 
         try {
             validateOptions(schema, options, "NativeScriptSnapshotPlugin");
+
+            if (options.chunk) {
+                options.chunks = options.chunks || [];
+                options.chunks.push(options.chunk);
+            }
         } catch (error) {
            throw new Error(error.message);
         }
     }
 
-    // inherit ProjectSnapshotGenerator
     NativeScriptSnapshotPlugin.prototype = Object.create(ProjectSnapshotGenerator.prototype);
     NativeScriptSnapshotPlugin.prototype.constructor = NativeScriptSnapshotPlugin;