The web pack require can now create a dynamic require context, and that context can be fed into the modules so the .js and .css files can be loaded through web pack loaders.

Consider the following bundle.config.js:

if (global.TNS_WEBPACK) {
    // registers tns-core-modules UI framework modules
    require("bundle-entry-points");

    // register application modules
    // This will register each xml, css, js, ts, scss etc. in the app/ folder
    const context = require.context("~/", true, /page\.(xml|css|js|ts|scss)$/);
    global.registerWebpackModules(context);
}

This will make a context for the entire app (~/ is the app/) folder and recursively require all files that end in ...page.xml, ...page.css, ...page.ts etc. Webpack will create a map such as:

var map = {
	"./main-page.js": 151,
	"./main-page.scss": 153,
	"./main-page.xml": 154,
	"./views/second-page.css": 155,
	"./views/second-page.js": 156,
	"./views/second-page.xml": 157
};

for the bundle.js, (note they can be added to the vendor.js and get into the snapshot for android too) and then when the {N} builder resolves a page, it will load the css and js files from that map.

The last argument of require.context is a regex so it allows great flexibility.
Developers will no longer need to global.registerModule for each of their JavaScript files as long as they can figure out a convention (like placing all views in a views folder, or postfixing each page with page.*, or if they are happy listing each .js file from app/.

This utility is designed to work with the nativescript-dev-webpack's PlatformFSPlugin or NativeScriptAngularCompilerPlugin that would virtually map file.android.* and file.ios.* to file.*.