chore: more base configuration

packages/webpack5/src/configuration/base.ts

@@ -1,20 +1,46 @@
 import Config from 'webpack-chain';
 import { IWebpackEnv, Platform } from '../index';
+import { getAbsoluteDistPath, getDistPath, getEntryPath, getPackageJson } from '../helpers/project';
+
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
-import { getDistPath } from '../helpers/projectHelpers';
 import { DefinePlugin } from 'webpack';
 import { WatchStateLoggerPlugin } from '../plugins/WatchStateLoggerPlugin';
+import TerserPlugin from 'terser-webpack-plugin';
 
 export default function (config: Config, env: IWebpackEnv): Config {
-	const distPath = getDistPath(env);
+	const entryPath = getEntryPath();
+	const distPath = getDistPath();
 	const platform = determinePlatformFromEnv(env);
+	const packageJson = getPackageJson();
 	const mode = env.production ? 'production' : 'development';
 
 	// set mode
 	config.mode(mode);
 
+	config.externals(['package.json']);
+
 	// todo: devtool
-	// config.devtool()
+	config.devtool('inline-source-map');
+
+	config.target('node');
+
+	config.entry('bundle').add(entryPath);
+
+	config.output.path(getAbsoluteDistPath()).pathinfo(false).publicPath('').libraryTarget('commonjs').globalObject('global');
+
+	// Set up Terser options
+	config.optimization.minimizer('TerserPlugin').use(TerserPlugin, [
+		{
+			terserOptions: {
+				compress: {
+					collapse_vars: platform !== 'android',
+					sequences: platform !== 'android',
+				},
+				// todo: move into vue.ts if not required in other flavors?
+				keep_fnames: true,
+			},
+		},
+	]);
 
 	// look for loaders in
 	//  - @nativescript/webpack/loaders
@@ -23,10 +49,10 @@ export default function (config: Config, env: IWebpackEnv): Config {
 
 	// inspector_modules
 	config.when(shouldIncludeInspectorModules(env), (config) => {
-		config.entry('inspector_modules').add('tns_modules/@nativescript/core/inspector_modules').end();
+		config.entry('tns_modules/@nativescript/core/inspector_modules').add('@nativescript/core/inspector_modules');
 	});
 
-	config.entry('bundle').add('todo/main').end();
+	config.resolve.extensions.add(`.${platform}.ts`).add('.ts').add(`.${platform}.js`).add('.js').add(`.${platform}.css`).add('.css').add(`.${platform}.scss`).add('.scss').add(`.${platform}.json`).add('.json');
 
 	// base aliases
 	config.resolve.alias.set('~/package.json', 'package.json').set('~', '<TODO>appFullPath').set('@', '<TODO>appFullPath');
@@ -96,17 +122,18 @@ export default function (config: Config, env: IWebpackEnv): Config {
 			'global.isAndroid': platform === 'android',
 			'global.isIOS': platform === 'ios',
 			process: 'global.process',
+			profile: '() => {}',
 		},
 	]);
 
 	// todo: we should probably move away from CopyWebpackPlugin
 	// it has many issues we can solve by simply copying files **before** the build even starts
 	// this is just a temp inline plugin that does nothing while building out the configs.
-	config.plugin('CopyWebpackPlugin').use(function CopyPluginTemp() {}, [
-		{
-			patterns: [],
-		},
-	]);
+	// config.plugin('CopyWebpackPlugin').use(function CopyPluginTemp() {}, [
+	// 	{
+	// 		patterns: [],
+	// 	},
+	// ]);
 
 	// add the WatchStateLogger plugin used to notify the CLI of build state
 	config.plugin('WatchStateLoggerPlugin').use(WatchStateLoggerPlugin);

packages/webpack5/src/configuration/react.ts

@@ -1,9 +1,9 @@
 import base from './base';
-import { IWebpackEnv } from '@nativescript/webpack';
+import { env as _env, IWebpackEnv } from '@nativescript/webpack';
 import Config from 'webpack-chain';
 import { merge } from 'webpack-merge';
 
-export default function (config: Config, env: IWebpackEnv): Config {
+export default function (config: Config, env: IWebpackEnv = _env): Config {
 	base(config, env);
 
 	// todo: use env

packages/webpack5/src/configuration/vue.ts

@@ -1,10 +1,10 @@
 import base from './base';
 import Config from 'webpack-chain';
 import { VueLoaderPlugin } from 'vue-loader';
-import { IWebpackEnv } from '../index';
+import { env as _env, IWebpackEnv } from '../index';
 import { merge } from 'webpack-merge';
 
-export default function (config: Config, env: IWebpackEnv): Config {
+export default function (config: Config, env: IWebpackEnv = _env): Config {
 	base(config, env);
 
 	// resolve .vue files
@@ -35,8 +35,12 @@ export default function (config: Config, env: IWebpackEnv): Config {
 			});
 		});
 
-	// add VueLoaderPlugin
-	config.plugin('VueLoaderPlugin').use(VueLoaderPlugin);
+	// add VueLoaderPlugin as the first plugin
+	config
+		.plugin('VueLoaderPlugin')
+		// @ts-ignore
+		.before(config.plugins.values()[0].name)
+		.use(VueLoaderPlugin);
 
 	// add an alias for vue, since some plugins may try to import it
 	config.resolve.alias.set('vue', 'nativescript-vue');

packages/webpack5/src/helpers/project.ts

@@ -0,0 +1,51 @@
+import { env } from '../index';
+import { resolve, basename } from 'path';
+
+export function getProjectRootPath(): string {
+	// todo: find actual path?
+
+	return process.cwd();
+	//__dirname
+}
+
+export function getAbsoluteDistPath() {
+	return resolve(getProjectRootPath(), getDistPath());
+}
+
+export function getEntryPath() {
+	const packageJson = getPackageJson();
+
+	return resolve(packageJson.main);
+}
+
+export function getDistPath() {
+	if (env.ios) {
+		const appName = basename(getProjectRootPath());
+		return `platforms/ios/${appName}/app`;
+	}
+
+	if (env.android) {
+		return `platforms/android/app/src/main/assets/app`;
+	}
+
+	// todo: additional platforms
+	// perhaps we could combine platform specifics into "plugins"
+	// 3rd party platforms would be treated the same
+}
+
+interface IPackageJson {
+	main?: string;
+	dependencies?: {
+		[name: string]: string;
+	};
+	devDependencies?: {
+		[name: string]: string;
+	};
+	// todo: add additional fields as we require them
+}
+
+export function getPackageJson() {
+	const packageJsonPath = resolve(getProjectRootPath(), 'package.json');
+
+	return require(packageJsonPath) as IPackageJson;
+}

packages/webpack5/src/helpers/projectHelpers.ts

@@ -1,40 +0,0 @@
-import { existsSync } from 'fs';
-import { resolve } from 'path';
-import { IWebpackEnv } from '@nativescript/webpack';
-
-export function getDistPath(env: IWebpackEnv) {
-	if (env.ios) {
-		return `platforms/ios/[todo]/app`;
-	}
-
-	if (env.android) {
-		return `platforms/android/app/src/main/assets/app`;
-	}
-
-	// todo: additional platforms
-	// perhaps we could combine platform specifics into "plugins"
-	// 3rd party platforms would be treated the same
-}
-
-export function getPackageJson(projectDir: string) {
-	const packageJsonPath = getPackageJsonPath(projectDir);
-	const result = readJsonFile(packageJsonPath);
-
-	return result;
-}
-
-export function readJsonFile(filePath: string) {
-	return require(filePath) as {
-		main: string;
-		// to be extended?
-	};
-}
-
-export function getPackageJsonPath(projectDir: string) {
-	const packagePath = resolve(projectDir, 'package.json');
-	if (existsSync(packagePath)) {
-		return packagePath;
-	} else {
-		return getPackageJsonPath(resolve(projectDir, '..'));
-	}
-}

packages/webpack5/src/helpers/temp.ts

@@ -1,5 +1,5 @@
 import { existsSync } from 'fs';
-import { getPackageJson } from './projectHelpers';
+import { getPackageJson } from './project';
 import { resolve } from 'path';
 
 // todo: get rid of these or reduce them to their simplest form
@@ -20,12 +20,12 @@ function verifyEntryModuleDirectory(appDirectory: string) {
 	}
 }
 
-function getPackageJsonEntry(appDirectory) {
-	const packageJsonSource = getPackageJson(appDirectory);
+function getPackageJsonEntry() {
+	const packageJsonSource = getPackageJson();
 	const entry = packageJsonSource.main;
 
 	if (!entry) {
-		throw new Error(`${appDirectory}/package.json must contain a 'main' attribute!`);
+		throw new Error(`package.json must contain a 'main' attribute!`);
 	}
 
 	return entry.replace(/\.js$/i, '');
@@ -34,7 +34,7 @@ function getPackageJsonEntry(appDirectory) {
 export function getEntryModule(appDirectory: string, platform: 'android' | 'ios') {
 	verifyEntryModuleDirectory(appDirectory);
 
-	const entry = getPackageJsonEntry(appDirectory);
+	const entry = getPackageJsonEntry();
 
 	const tsEntryPath = resolve(appDirectory, `${entry}.ts`);
 	const jsEntryPath = resolve(appDirectory, `${entry}.js`);

packages/webpack5/src/index.ts

@@ -2,6 +2,7 @@ import Config from 'webpack-chain';
 import webpack from 'webpack';
 import { configs } from './configuration';
 import { determineProjectFlavor } from './helpers/flavor';
+import { highlight } from 'cli-highlight';
 
 export type Platform = 'android' | 'ios' | string;
 
@@ -17,14 +18,21 @@ export interface IWebpackEnv {
 	production?: boolean;
 	report?: boolean;
 	hmr?: boolean;
+
+	// enable verbose output
+	verbose?: boolean;
 	// todo: add others
 }
 
 let webpackChains: any[] = [];
 let webpackMerges: any[] = [];
-let env: IWebpackEnv = {};
 let explicitUseConfig = false;
 
+/**
+ * @internal
+ */
+export let env: IWebpackEnv = {};
+
 ////// PUBLIC API
 export const defaultConfigs = configs;
 
@@ -34,9 +42,11 @@ export function init(_env: IWebpackEnv) {
 	}
 }
 
-export function useConfig(config: keyof typeof defaultConfigs) {
+export function useConfig(config: keyof typeof defaultConfigs | false) {
 	explicitUseConfig = true;
-	webpackChains.push(configs[config]);
+	if (config) {
+		webpackChains.unshift(configs[config]);
+	}
 }
 
 export function chainWebpack(chainFn: (config: Config, env: IWebpackEnv) => any) {
@@ -59,6 +69,11 @@ export function resolveChainableConfig() {
 		return chainFn(config, env);
 	});
 
+	if (env.verbose) {
+		console.log('Resolved chainable config:');
+		console.log(highlight(config.toString(), { language: 'js' }));
+	}
+
 	return config;
 }
 

packages/webpack5/src/plugins/WatchStateLoggerPlugin.ts

@@ -31,9 +31,10 @@ export class WatchStateLoggerPlugin {
 			}
 
 			const emittedFiles = Object.keys(compilation.assets).filter((assetKey) => compilation.assets[assetKey].emitted);
-
 			const chunkFiles = getChunkFiles(compilation);
+
 			process.send && process.send(messages.compilationComplete, (error) => null);
+
 			// Send emitted files so they can be LiveSynced if need be
 			process.send && process.send({ emittedFiles, chunkFiles, hash: compilation.hash }, (error) => null);
 		});