refactor: use chained configs internally

packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap

@@ -3,9 +3,7 @@
 exports[`vue configuration works 1`] = `
 Object {
   "entry": Object {
-    "bundle.js": Array [
+    "": Array [],
-      "bundle.js",
-    ],
   },
   "module": Object {
     "rules": Array [
@@ -20,6 +18,29 @@ Object {
           },
         ],
       },
+      Object {
+        "use": Array [
+          Object {
+            "loader": "ts-loader",
+            "options": Object {
+              "appendTsSuffixTo": Array [
+                /\\\\\\.vue\\$/,
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  },
+  "plugins": Array [
+    VueLoaderPlugin {},
+  ],
+  "resolve": Object {
+    "alias": Object {
+      "vue": "nativescript-vue",
+    },
+    "extensions": Array [
+      ".vue",
     ],
   },
 }

packages/webpack5/package.json

@@ -16,6 +16,7 @@
     "webpack": "^5.4.0"
   },
   "dependencies": {
+    "vue-loader": "^15.9.5",
     "webpack-chain": "^6.5.1"
   }
 }

packages/webpack5/src/configuration/angular.ts

@@ -1,8 +1,10 @@
 import base from './base';
+import { IWebpackEnv } from '@nativescript/webpack';
+import Config from 'webpack-chain';
 
 // todo: add base configuration for angular
-export default function (env) {
+export default function (env: IWebpackEnv): Config {
 	const config = base(env);
 
-	return {};
+	return config;
 }

packages/webpack5/src/configuration/base.ts

@@ -1,13 +1,9 @@
-import { Configuration } from 'webpack';
 import Config from 'webpack-chain';
+import { IWebpackEnv } from './index';
 
 // todo: add base configuration that's shared across all flavors
-export default function (env): Configuration {
+export default function (env: IWebpackEnv): Config {
-	const config = new Config()
+	const config = new Config();
-	config.entry('')
+	config.entry('');
-	return {
+	return config;
-		entry: {
-			'bundle.js': 'bundle.js',
-		},
-	};
 }

packages/webpack5/src/configuration/index.ts

@@ -1,7 +1,25 @@
-export { default as angularConfig } from './angular';
+import base from './base';
-export { default as baseConfig } from './base';
+
-export { default as javascriptConfig } from './javascript';
+import angular from './angular';
-export { default as reactConfig } from './react';
+import javascript from './javascript';
-export { default as svelteConfig } from './svelte';
+import react from './react';
-export { default as typescriptConfig } from './typescript';
+import svelte from './svelte';
-export { default as vueConfig } from './vue';
+import typescript from './typescript';
+import vue from './vue';
+
+// export final configs
+// todo: perhaps we can export chain configs as well
+
+export const baseConfig = (env) => base(env).toConfig();
+
+export const angularConfig = (env) => angular(env).toConfig();
+export const javascriptConfig = (env) => javascript(env).toConfig();
+export const reactConfig = (env) => react(env).toConfig();
+export const svelteConfig = (env) => svelte(env).toConfig();
+export const typescriptConfig = (env) => typescript(env).toConfig();
+export const vueConfig = (env) => vue(env).toConfig();
+
+export interface IWebpackEnv {
+	hmr: boolean;
+	// todo: add others
+}

packages/webpack5/src/configuration/javascript.ts

@@ -1,8 +1,10 @@
 import base from './base';
+import { IWebpackEnv } from '@nativescript/webpack';
+import Config from 'webpack-chain';
 
 // todo: add base configuration for core
-export default function (env) {
+export default function (env: IWebpackEnv): Config {
 	const config = base(env);
 
-	return {};
+	return config;
 }

packages/webpack5/src/configuration/react.ts

@@ -1,8 +1,10 @@
 import base from './base';
+import { IWebpackEnv } from '@nativescript/webpack';
+import Config from 'webpack-chain';
 
 // todo: add base configuration for react
-export default function (env) {
+export default function (env: IWebpackEnv): Config {
 	const config = base(env);
 
-	return {};
+	return config;
 }

packages/webpack5/src/configuration/svelte.ts

@@ -1,8 +1,10 @@
 import base from './base';
+import { IWebpackEnv } from '@nativescript/webpack';
+import Config from 'webpack-chain';
 
 // todo: add base configuration for svelte
-export default function (env) {
+export default function (env: IWebpackEnv): Config {
 	const config = base(env);
 
-	return {};
+	return config;
 }

packages/webpack5/src/configuration/typescript.ts

@@ -1,8 +1,10 @@
 import base from './base';
+import { IWebpackEnv } from '@nativescript/webpack';
+import Config from 'webpack-chain';
 
 // todo: add base configuration for core
-export default function (env) {
+export default function (env: IWebpackEnv): Config {
 	const config = base(env);
 
-	return {};
+	return config;
 }

packages/webpack5/src/configuration/vue.ts

@@ -1,10 +1,16 @@
 import base from './base';
-import { default as Config } from 'webpack-chain';
+import Config from 'webpack-chain';
+import { VueLoaderPlugin } from 'vue-loader';
+import { IWebpackEnv } from './index';
 
 // todo: add base configuration for vue
-export default function (env) {
+export default function (env: IWebpackEnv): Config {
-	const config = new Config().merge(base(env));
+	const config = base(env);
 
+	// resolve .vue files
+	config.resolve.extensions.prepend('.vue');
+
+	// add a rule for .vue files
 	config.module
 		.rule('vue')
 		.test(/\.vue$/)
@@ -18,14 +24,23 @@ export default function (env) {
 		})
 		.end();
 
-	// todo: we may want to use webpack-chain internally
+	// set up ts support in vue files
-	// to avoid "trying to read property x of undefined" type of issues
+	config.module
-	/*
+		.rule('ts')
-		config.module.rules.push({
+		.use('ts-loader')
-			test: /.vue$/,
+		.loader('ts-loader')
-			use: [],
+		.tap((options) => {
+			return {
+				...options,
+				appendTsSuffixTo: [/\.vue$/],
+			};
 		});
-	*/
 
-	return config.toConfig();
+	// add VueLoaderPlugin
+	config.plugin('vue-plugin').use(VueLoaderPlugin);
+
+	// add an alias for vue, since some plugins may try to import it
+	config.resolve.alias.set('vue', 'nativescript-vue');
+
+	return config;
 }