@vaishnavthakur/pack-launchpad-app v1.0.13

@vaishnavthakur/pack-launchpad-app

Webpack build for Micro-Frontend Application which can be onboarded to LaunchPad.

Usage

Step 1: Installation - Install the package in your dev dependencies from NPM using

npm install @vaishnavthakur/pack-launchpad-app --save-dev

Step 2: Configure Paths

• This build pack requires certain paths in your package folder structure. Following is the sample.

const path = require('path');

module.exports = {
    src: path.resolve(__dirname, '../src'),
    root: path.resolve(__dirname, '../'),
    public: path.resolve(__dirname, '../public'),
    build: path.resolve(__dirname, '../'),
    configuration: path.resolve(__dirname, '../configuration')
}

Step 2: Configure Webpack

Configure the webpack build. Create webpack.config.ts file in root directory (or any folder you wish.)

const WebpackBuild = require('@vaishnavthakur/pack-launchpad-app');
const paths = require('./path');

const webpackBuilder = new WebpackBuild.WebpackConfigBuilder({
    mode: process.env.NODE_ENV as 'development' | 'production',
    paths: paths,
    htmlWebpackPluginConfig: {
        description: 'vaishnavthakur.com',
        title: 'vaishnavthakur.com'
    },
    uniqueName: 'launchpad',
});

module.exports = webpackBuilder.customize({
    output: {
        publicPath: '/',
    },
}).build();

Step 3: Configure Webpack in package.json

In script section, add below scripts to create production build, dev build and production build with bundle analyzer.

"scripts": {
        "analyze": "cross-env NODE_ENV=production ANALYZE_BUNDLE=true webpack --config configuration/webpack.config.ts",
        "start": "cross-env NODE_ENV=development webpack serve --config configuration/webpack.config.ts",
        "build": "cross-env NODE_ENV=production webpack --config configuration/webpack.config.ts",
        
        ...otherscripts
    },