harshaktg

## singleSPA.config.js
import { registerApplication, start } from 'single-spa'

registerApplication(
  'vue',
  () => import('./components/vue/index.js'),
  () => location.pathname === "/vue" || location.pathname === "/" ? true : false
);

registerApplication(
  'react',

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MicroFrontEnds example</title>
    <script src="./store.js"></script>
</head>
<body>
  <div id="react"></div>

## package.json
{
  "name": "microfrontends-example",
  "version": "1.0.0",
  "description": "To demonstrate micro frontends using single SPA",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --config webpack.config.js -p"
  },
  "author": "Harsha Vardhan",

## package.json
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "To demonstrate the working of Webpack",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development"
  },
  "author": "Harsha Vardhan",
  "license": "ISC",

## webpack.config.js
module.exports = {
    "entry": "./source/index.js"
}

## webpack.config.js
const path = require('path')

module.exports = {
    entry: { index: path.resolve(__dirname, "source", "index.js") }
};

## webpack.config.js
const path = require('path')

module.exports = {
    output: { path: path.resolve(__dirname, "build"), filename: "main.js" }
};

## webpack.config.js
const HTMLWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
    plugins: [
        new HTMLWebpackPlugin({
            template: path.resolve(__dirname, "source", "index.html")
        })
    ]
};

## package.json
...
"scripts": {
  "dev": "webpack --mode development",
  "start": "webpack-dev-server --mode development --open"
}
...

## webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.filename1$/,
        use: ["loader-b", "loader-a"]
      },
      {
        test: /\.filename2$/,
        use: ["loader-d", "loader-c"]
	import { registerApplication, start } from 'single-spa'

	registerApplication(
	'vue',
	() => import('./components/vue/index.js'),
	() => location.pathname === "/vue" \|\| location.pathname === "/" ? true : false
	);

	registerApplication(
	'react',
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>MicroFrontEnds example</title>
	<script src="./store.js"></script>
	</head>
	<body>
	<div id="react"></div>
	{
	"name": "microfrontends-example",
	"version": "1.0.0",
	"description": "To demonstrate micro frontends using single SPA",
	"main": "index.js",
	"scripts": {
	"start": "webpack-dev-server --open",
	"build": "webpack --config webpack.config.js -p"
	},
	"author": "Harsha Vardhan",
	{
	"name": "webpack-demo",
	"version": "1.0.0",
	"description": "To demonstrate the working of Webpack",
	"main": "index.js",
	"scripts": {
	"dev": "webpack --mode development"
	},
	"author": "Harsha Vardhan",
	"license": "ISC",
	const path = require('path')

	module.exports = {
	entry: { index: path.resolve(__dirname, "source", "index.js") }
	};
	const path = require('path')

	module.exports = {
	output: { path: path.resolve(__dirname, "build"), filename: "main.js" }
	};
	const HTMLWebpackPlugin = require('html-webpack-plugin')
	const path = require('path')

	module.exports = {
	plugins: [
	new HTMLWebpackPlugin({
	template: path.resolve(__dirname, "source", "index.html")
	})
	]
	};
	...
	"scripts": {
	"dev": "webpack --mode development",
	"start": "webpack-dev-server --mode development --open"
	}
	...
	module.exports = {
	module: {
	rules: [
	{
	test: /\.filename1$/,
	use: ["loader-b", "loader-a"]
	},
	{
	test: /\.filename2$/,
	use: ["loader-d", "loader-c"]