chore: more base configuration

packages/webpack5/src/configuration/base.ts

@@ -2,11 +2,19 @@ import Config from 'webpack-chain';
 import { IWebpackEnv, WebpackPlatform } from './index';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import { getDistPath } from '../helpers/projectHelpers';
+import { DefinePlugin } from 'webpack';
+import { WatchStateLoggerPlugin } from '../plugins/WatchStateLoggerPlugin';
 
 // todo: add base configuration that's shared across all flavors
 export default function (env: IWebpackEnv): Config {
 	const config = new Config();
 	const distPath = getDistPath(env);
+	const platform = determinePlatformFromEnv(env);
+
+	// look for loaders in
+	//  - @nativescript/webpack/loaders
+	//  - node_modules
+	config.resolveLoader.modules.add('@nativescript/webpack/loaders').add('node_modules');
 
 	// inspector_modules
 	config.when(shouldIncludeInspectorModules(env), (config) => {
@@ -21,6 +29,53 @@ export default function (env: IWebpackEnv): Config {
 	// resolve symlinks
 	config.resolve.symlinks(true);
 
+	// set up ts support
+	config.module
+		.rule('ts')
+		.test(/\.ts$/)
+		.use('ts-loader')
+		.loader('ts-loader')
+		.options({
+			// configFile: '',
+			transpileOnly: true,
+			allowTsInNodeModules: true,
+			compilerOptions: {
+				sourceMap: true,
+				declaration: false,
+			},
+			getCustomTransformers() {
+				return {
+					before: [
+						// todo: transform NativeClass
+					],
+				};
+			},
+		});
+
+	// set up js
+	// todo: do we need babel-loader? It's useful to support it
+	config.module.rule('js').test(/\.js$/).use('babel-loader').loader('babel-loader');
+
+	// set up css
+	config.module
+		.rule('css')
+		.test(/\.css$/)
+		.use('css2json-loader')
+		.loader('css2json-loader')
+		.end()
+		.use('css-loader')
+		.loader('css-loader');
+
+	// set up scss
+	config.module
+		.rule('scss')
+		.test(/\.scss$/)
+		.use('css2json-loader')
+		.loader('css2json-loader')
+		.end()
+		.use('scss-loader')
+		.loader('scss-loader');
+
 	// items to clean
 	config.plugin('clean').use(CleanWebpackPlugin, [
 		{
@@ -29,6 +84,28 @@ export default function (env: IWebpackEnv): Config {
 		},
 	]);
 
+	// todo: refine defaults
+	config.plugin('define').use(DefinePlugin, [
+		{
+			'global.NS_WEBPACK': true,
+			'global.isAndroid': platform === WebpackPlatform.android,
+			'global.isIOS': platform === WebpackPlatform.ios,
+			process: 'global.process',
+		},
+	]);
+
+	// 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('copy').use(function CopyPluginTemp() {}, [
+		{
+			patterns: [],
+		},
+	]);
+
+	// add the WatchStateLogger plugin used to notify the CLI of build state
+	config.plugin('watch-state-logger').use(WatchStateLoggerPlugin);
+
 	return config;
 }
 

packages/webpack5/src/configuration/javascript.ts

@@ -2,9 +2,16 @@ import base from './base';
 import { IWebpackEnv } from '@nativescript/webpack';
 import Config from 'webpack-chain';
 
-// todo: add base configuration for core
+// todo: add base configuration for core with javascript
 export default function (env: IWebpackEnv): Config {
 	const config = base(env);
 
+	// set up xml
+	config.module
+		.rule('xml')
+		.test(/\.xml$/)
+		.use('xml-loader')
+		.loader('xml-loader');
+
 	return config;
 }

packages/webpack5/src/configuration/vue.ts

@@ -2,7 +2,7 @@ import base from './base';
 import Config from 'webpack-chain';
 import { VueLoaderPlugin } from 'vue-loader';
 import { IWebpackEnv } from './index';
-
+import { merge } from 'webpack-merge';
 // todo: add base configuration for vue
 export default function (env: IWebpackEnv): Config {
 	const config = base(env);
@@ -29,15 +29,14 @@ export default function (env: IWebpackEnv): Config {
 		.rule('ts')
 		.use('ts-loader')
 		.loader('ts-loader')
-		.tap((options) => {
-			return {
-				...options,
-				appendTsSuffixTo: [/\.vue$/],
-			};
+		.tap((options = {}) => {
+			return merge(options, {
+				appendTsSuffixTo: ['\\.vue$'],
+			});
 		});
 
 	// add VueLoaderPlugin
-	config.plugin('vue-plugin').use(VueLoaderPlugin);
+	config.plugin('vue').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/plugins/WatchStateLoggerPlugin.ts

@@ -0,0 +1,58 @@
+export enum messages {
+	compilationComplete = 'Webpack compilation complete.',
+	startWatching = 'Webpack compilation complete. Watching for file changes.',
+	changeDetected = 'File change detected. Starting incremental webpack compilation...',
+}
+
+/**
+ * This little plugin will report the webpack state through the console.
+ * So the {N} CLI can get some idea when compilation completes.
+ */
+export class WatchStateLoggerPlugin {
+	isRunningWatching: boolean;
+
+	apply(compiler) {
+		const plugin = this;
+		compiler.hooks.watchRun.tapAsync('WatchStateLoggerPlugin', function (compiler, callback) {
+			plugin.isRunningWatching = true;
+			if (plugin.isRunningWatching) {
+				console.log(messages.changeDetected);
+			}
+			process.send && process.send(messages.changeDetected, (error) => null);
+			callback();
+		});
+		compiler.hooks.afterEmit.tapAsync('WatchStateLoggerPlugin', function (compilation, callback) {
+			callback();
+
+			if (plugin.isRunningWatching) {
+				console.log(messages.startWatching);
+			} else {
+				console.log(messages.compilationComplete);
+			}
+
+			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);
+		});
+	}
+}
+
+function getChunkFiles(compilation) {
+	const chunkFiles = [];
+	try {
+		compilation.chunks.forEach((chunk) => {
+			chunk.files.forEach((file) => {
+				if (file.indexOf('hot-update') === -1) {
+					chunkFiles.push(file);
+				}
+			});
+		});
+	} catch (e) {
+		console.log('Warning: Unable to find chunk files.');
+	}
+
+	return chunkFiles;
+}