feat: webpack build improvement 2x and unused scripts files are removed and refactored

2025-12-06 04:19:43 +00:00 · 2023-08-03 15:13:18 +05:30
parent 59689cd3df
commit 90ada8660e
8 changed files with 29 additions and 108 deletions
--- a/package.json
+++ b/package.json
@@ -6,12 +6,15 @@
  "main": "packages/firecamp-desktop-app/dist/services/Main",
  "homepage": "./dev",
  "scripts": {
-    "build:workspace": "pnpm --filter=@firecamp/scripts --filter=@firecamp/rest-executor --filter=@firecamp/ws-executor --filter=@firecamp/socket.io-executor build",
    "boot": "pnpm install --shamefully-hoist",
    "bootstrap": "pnpm install --shamefully-hoist",
-    "start": "npx webpack serve --config ./webpack.dev.js",
-    "dev": "APP_VERSION=$npm_package_version AppFormat=webapp && node scripts/build && pnpm build:workspace && pnpm start",
-    "release:web": "AppFormat=webapp && pnpm build:workspace && node scripts/release",
+    "dev": "run-p build:workspace  webpack:dev",
+    "build": "run-p validate:release build:workspace webpack:prod",
+    "build:workspace": "pnpm --filter=@firecamp/scripts --filter=@firecamp/rest-executor --filter=@firecamp/ws-executor --filter=@firecamp/socket.io-executor build",
+    "webpack:dev": "webpack serve --config ./webpack.dev.js",
+    "webpack:prod": "webpack --config ./webpack.prod.js",
+    "validate:release": "node scripts/release",
+    "release:web": "pnpm build",
    "lint": "eslint packages/firecamp-rest/src/**/*.{ts|tsx} packages/*.js packages-clients/*.js scripts webpack/*.js",
    "test": "jest",
    "prettify": "prettier --write \"platform/firecamp-platform/src/**/*.(ts|tsx)\" \"packages/firecamp-rest/src/**/*.(ts|tsx)\" \"packages/firecamp-graphql/src/**/*.(ts|tsx)\"",
@@ -76,6 +79,7 @@
    "jest-css-modules-transform": "^4.4.2",
    "lint-staged": "^13.1.2",
    "node-polyfill-webpack-plugin": "^2.0.0",
+    "npm-run-all": "^4.1.5",
    "postcss-loader": "^7.0.2",
    "prettier": "^2.6.2",
    "react-addons-test-utils": "^15.0.2",
--- a/playgrounds/firecamp-rest/src/components/request/tabs/BodyTab.tsx
+++ b/playgrounds/firecamp-rest/src/components/request/tabs/BodyTab.tsx
@@ -115,8 +115,6 @@ const BodyTab: FC<any> = () => {
        return <BinaryBody body={body || {}} onChange={changeBodyValue} />;
      case ERestBodyTypes.GraphQL:
        return <GraphQLBody body={body || {}} onChange={changeBodyValue} />;
-      case ERestBodyTypes.None:
-        return <NoBodyTab selectBodyType={_selectBodyType} />;
      default:
        return <></>;
    }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -135,6 +135,9 @@ importers:
      node-polyfill-webpack-plugin:
        specifier: ^2.0.0
        version: 2.0.1(webpack@5.75.0)
+      npm-run-all:
+        specifier: ^4.1.5
+        version: 4.1.5
      postcss-loader:
        specifier: ^7.0.2
        version: 7.0.2(postcss@8.4.21)(webpack@5.75.0)
@@ -10238,7 +10241,7 @@ packages:
      - supports-color

  /concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}

  /concat-stream@1.4.11:
    resolution: {integrity: sha512-X3JMh8+4je3U1cQpG87+f9lXHDrqcb2MVLg9L7o8b1UZ0DzhRrUpdn65ttzu10PpJPPI3MQNkis+oha6TSA9Mw==}
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -1,47 +0,0 @@
-/* eslint-disable no-console */
-require('dotenv').config();
-const fs = require('fs');
-const path = require('path');
-require('shelljs/global');
-const { Environment } = require('./constants');
-
-const env = process.env.NODE_ENV;
-const isProdOrStage =
-  env === Environment.Production || env === Environment.Staging;
-const build = isProdOrStage ? require('../webpack.prod') : () => {};
-
-module.exports = async () => {
-  try {
-    // hold the build path as per the environment mode
-    const buildPath = path.join(`${__dirname}/../build/${env}`);
-    // copy project assets and generate config.
-    const directoryPaths = [path.join(`${__dirname}/../build`), buildPath];
-
-    // Remove build before start bundle
-    rm('-rf', buildPath);
-
-    // Create build directories
-    directoryPaths.forEach((directoryPath) => {
-      if (!fs.existsSync(directoryPath)) mkdir(directoryPath);
-    });
-
-    // Copy react app assets
-    cp(
-      '-R',
-      path.join(`${__dirname}/../platform/firecamp-platform/public/assets/*`),
-      buildPath
-    );
-
-    // generate package.json and manifest based on app environment
-    // exec(`node ${buildPath}/build-scripts/init-package.js`);
-
-    if (env === Environment.Production || env === Environment.Staging) {
-      await build();
-    }
-    return Promise.resolve();
-  } catch (error) {
-    return Promise.reject(error);
-  }
-};
-
-if (env === Environment.Development) module.exports();
--- a/scripts/release.js
+++ b/scripts/release.js
@@ -1,21 +1,12 @@
 /* eslint-disable no-console */
 require('dotenv-vault-core').config();
 const { red, yellow } = require('colors');
-const semver = require('semver');
+// const semver = require('semver');
 require('shelljs/global');
-const build = require('./build');
 const { version } = require('../package.json');
-const { Environment, AppFormat } = require('./constants');
+const { Environment } = require('./constants');

 const env = process.env.NODE_ENV;
-const helper = {
-  buildWebApp: async () => {
-    process.env.NODE_OPTIONS = '--max-old-space-size=4096';
-    await build();
-  },
-};
-
-// set app version in the environment
 process.env.APP_VERSION = version;

 // check FIRECAMP_API_HOST env. variable value does not contains invalid value
@@ -33,18 +24,5 @@ if (
      process.env.FIRECAMP_API_HOST
    )})`
  );
-  process.exit();
-}
-
-// pre conditions can be validated here
-const preBuildCliCommands = async () => Promise.resolve();
-
-if ([Environment.Production, Environment.Staging].includes(env)) {
-  try {
-    preBuildCliCommands().then(async () => {
-      await helper.buildWebApp();
-    });
-  } catch (error) {
-    console.error(error);
-  }
+  process.exit(1);
 }
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -8,10 +8,10 @@ const path = require('path');
 // const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 const metadata = require('./package.json');

-const env = process.env.NODE_ENV;
-
+const NodeEnv = process.env.NODE_ENV;
 console.log(process.env.FIRECAMP_API_HOST, 'FIRECAMP_API_HOST'); // for debugging purposes. remove when ready.

 const plugins = [
@@ -84,6 +84,14 @@ const plugins = [
      ),
    },
  }),
+  new CopyPlugin({
+    patterns: [
+      {
+        from: `${__dirname}/platform/firecamp-platform/public/assets`,
+        to: `${__dirname}/build/${NodeEnv}`,
+      },
+    ],
+  }),
 ];

 const rules = [
@@ -177,6 +185,7 @@ module.exports = {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
+          // eslint-disable-next-line no-unused-vars
          name(module) {
            return 'vender';

--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -6,6 +6,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const base = require('./webpack.common');

 // const withReport = process.env.npm_config_withReport;
+const nodeEnv = process.env.NODE_ENV;

 module.exports = merge(base, {
  mode: 'development',
@@ -15,7 +16,7 @@ module.exports = merge(base, {
    globalObject: 'this',
    filename: '[name].dev.js',
    chunkFilename: '[name].dev.js',
-    path: `${__dirname}/build/${env}`,
+    path: `${__dirname}/build/${nodeEnv}`,
    publicPath: '',
  },
  optimization: {
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -7,7 +7,7 @@ const base = require('./webpack.common');

 const nodeEnv = process.env.NODE_ENV;

-const config = merge(base, {
+module.exports = merge(base, {
  mode: 'production',
  output: {
    clean: true,
@@ -35,28 +35,3 @@ const config = merge(base, {
    // new CompressionPlugin(),
  ],
 });
-
-module.exports = () =>
-  new Promise((resolve, reject) => {
-    // eslint-disable-next-line no-console
-    console.log('[Webpack Build]');
-    // eslint-disable-next-line no-console
-    console.log('-'.repeat(80));
-
-    const compiler = webpack(config);
-
-    compiler.run((err, stats) => {
-      if (err) {
-        console.error(err.stack || err);
-        if (err.details) console.error(err.details);
-        reject(err.stack || err.details || err);
-      }
-      const info = stats.toJson();
-      if (stats.hasErrors()) {
-        console.error(info.errors);
-        reject(info.errors);
-      }
-      if (stats.hasWarnings()) console.warn(info.warnings);
-      resolve();
-    });
-  });