chore: webpack build improvement

webpack.common.js

@@ -2,121 +2,17 @@
 require('dotenv').config();
 /* eslint-disable no-console */
 require('dotenv-vault-core').config();
-
-console.log(process.env.FIRECAMP_API_HOST, 'FIRECAMP_API_HOST'); // for debugging purposes. remove when ready.
-
 const webpack = require('webpack');
 const path = require('path');
 // eslint-disable-next-line import/no-extraneous-dependencies
 // const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const metadata = require('./package.json');
 
 const env = process.env.NODE_ENV;
 
-const metadata = require('./package.json');
-
-const common = {
-  entry: {
-    index: path.join(
-      __dirname,
-      './platform/firecamp-platform/src/containers/index.tsx'
-    ),
-    identity: path.join(
-      __dirname,
-      './platform/firecamp-platform/src/containers/identity.tsx'
-    ),
-  },
-  optimization: {
-    runtimeChunk: 'single',
-    splitChunks: {
-      // name: 'vendor',
-      // chunks(chunk) {
-      //   // To prevent generate separate chunk for background script
-      //   // Because all node_modules not needed in background script
-      //   return !chunk?.name?.includes('background');
-      // },
-      chunks: 'all',
-      maxInitialRequests: Infinity,
-      minSize: 0,
-      cacheGroups: {
-        vendor: {
-          test: /[\\/]node_modules[\\/]/,
-          name(module) {
-            return 'vender';
-
-            // get the name. E.g. node_modules/packageName/not/this/part.js
-            // or node_modules/packageName
-            // const packageName = module.context.match(
-            //   /[\\/]node_modules[\\/](.*?)([\\/]|$)/
-            // )[1];
-
-            // // npm package names are URL-safe, but some servers don't like @ symbols
-            // return `npm.${packageName.replace('@', '')}`;
-          },
-        },
-      },
-    },
-  },
-  resolve: {
-    extensions: ['*', '.mjs', '.js', '.json', '.jsx', '.ts', '.tsx', '.svg'],
-    alias: {
-      // faker: path.resolve('./node_modules/faker'),
-      react: path.resolve('./node_modules/react'),
-      'react-dom': path.resolve('./node_modules/react-dom'),
-      lodash: path.resolve('./node_modules/lodash'),
-      nanoid: path.resolve('./node_modules/nanoid'),
-      'awesome-notifications': path.resolve(
-        './node_modules/awesome-notifications'
-      ),
-      '@babel/runtime': path.resolve('./node_modules/@babel/runtime'),
-      'monaco-editor': path.resolve('./node_modules/monaco-editor'),
-    },
-    fallback: {
-      fs: false,
-    },
-  },
-};
-
-const outputPath = `${__dirname}/build/${env}`;
-const publicPath = '';
-const output = {
-  globalObject: 'this',
-  filename: '[name].bundle.js',
-  chunkFilename: '[name].bundle.js',
-  path: outputPath,
-  publicPath,
-};
-
-// exports.output.path = path.join(__dirname, `./build/${env}`);
-
-const _env = {
-  NODE_ENV: JSON.stringify(process.env.NODE_ENV),
-  FIRECAMP_API_HOST: JSON.stringify(process.env.FIRECAMP_API_HOST),
-  FIRECAMP_CLOUD_AGENT: JSON.stringify(process.env.FIRECAMP_CLOUD_AGENT),
-  FIRECAMP_EXTENSION_AGENT_ID: JSON.stringify(
-    process.env.FIRECAMP_EXTENSION_AGENT_ID
-  ),
-  APP_VERSION: JSON.stringify(metadata.version),
-  AppFormat: JSON.stringify(process.env.AppFormat),
-  SENTRY_DSN: JSON.stringify(process.env.SENTRY_DSN),
-  CRISP_WEBSITE_ID: JSON.stringify(process.env.CRISP_WEBSITE_ID),
-  CRISP_FIRECAMP_DEV: JSON.stringify(process.env.CRISP_FIRECAMP_DEV),
-  GOOGLE_OAUTH2_CLIENT_ID: JSON.stringify(process.env.GOOGLE_OAUTH2_CLIENT_ID),
-  GOOGLE_OAUTH2_REDIRECT_URI: JSON.stringify(
-    process.env.GOOGLE_OAUTH2_REDIRECT_URI
-  ),
-  GITHUB_OAUTH2_CLIENT_ID: JSON.stringify(process.env.GITHUB_OAUTH2_CLIENT_ID),
-  GITHUB_OAUTH2_REDIRECT_URI: JSON.stringify(
-    process.env.GITHUB_OAUTH2_REDIRECT_URI
-  ),
-  GOOGLE_ANALYTICS_CHROME_ID: JSON.stringify(
-    process.env.GOOGLE_ANALYTICS_CHROME_ID
-  ),
-  GOOGLE_ANALYTICS_ELECTRON_ID: JSON.stringify(
-    process.env.GOOGLE_ANALYTICS_ELECTRON_ID
-  ),
-};
+console.log(process.env.FIRECAMP_API_HOST, 'FIRECAMP_API_HOST'); // for debugging purposes. remove when ready.
 
 const plugins = [
   new HtmlWebpackPlugin({
@@ -157,10 +53,35 @@ const plugins = [
   // }),11
   new webpack.DefinePlugin({
     'process.env': {
-      ..._env,
+      NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+      FIRECAMP_API_HOST: JSON.stringify(process.env.FIRECAMP_API_HOST),
+      FIRECAMP_CLOUD_AGENT: JSON.stringify(process.env.FIRECAMP_CLOUD_AGENT),
       FIRECAMP_EXTENSION_AGENT_ID: JSON.stringify(
         process.env.FIRECAMP_EXTENSION_AGENT_ID
       ),
+      APP_VERSION: JSON.stringify(metadata.version),
+      AppFormat: JSON.stringify(process.env.AppFormat),
+      SENTRY_DSN: JSON.stringify(process.env.SENTRY_DSN),
+      CRISP_WEBSITE_ID: JSON.stringify(process.env.CRISP_WEBSITE_ID),
+      CRISP_FIRECAMP_DEV: JSON.stringify(process.env.CRISP_FIRECAMP_DEV),
+      GOOGLE_OAUTH2_CLIENT_ID: JSON.stringify(
+        process.env.GOOGLE_OAUTH2_CLIENT_ID
+      ),
+      GOOGLE_OAUTH2_REDIRECT_URI: JSON.stringify(
+        process.env.GOOGLE_OAUTH2_REDIRECT_URI
+      ),
+      GITHUB_OAUTH2_CLIENT_ID: JSON.stringify(
+        process.env.GITHUB_OAUTH2_CLIENT_ID
+      ),
+      GITHUB_OAUTH2_REDIRECT_URI: JSON.stringify(
+        process.env.GITHUB_OAUTH2_REDIRECT_URI
+      ),
+      GOOGLE_ANALYTICS_CHROME_ID: JSON.stringify(
+        process.env.GOOGLE_ANALYTICS_CHROME_ID
+      ),
+      GOOGLE_ANALYTICS_ELECTRON_ID: JSON.stringify(
+        process.env.GOOGLE_ANALYTICS_ELECTRON_ID
+      ),
     },
   }),
 ];
@@ -231,8 +152,65 @@ const rules = [
 ];
 
 module.exports = {
-  ...common,
-  output,
+  entry: {
+    index: path.join(
+      __dirname,
+      './platform/firecamp-platform/src/containers/index.tsx'
+    ),
+    identity: path.join(
+      __dirname,
+      './platform/firecamp-platform/src/containers/identity.tsx'
+    ),
+  },
+  optimization: {
+    runtimeChunk: 'single',
+    splitChunks: {
+      // name: 'vendor',
+      // chunks(chunk) {
+      //   // To prevent generate separate chunk for background script
+      //   // Because all node_modules not needed in background script
+      //   return !chunk?.name?.includes('background');
+      // },
+      chunks: 'all',
+      maxInitialRequests: Infinity,
+      minSize: 0,
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name(module) {
+            return 'vender';
+
+            // get the name. E.g. node_modules/packageName/not/this/part.js
+            // or node_modules/packageName
+            // const packageName = module.context.match(
+            //   /[\\/]node_modules[\\/](.*?)([\\/]|$)/
+            // )[1];
+
+            // // npm package names are URL-safe, but some servers don't like @ symbols
+            // return `npm.${packageName.replace('@', '')}`;
+          },
+        },
+      },
+    },
+  },
+  resolve: {
+    extensions: ['*', '.mjs', '.js', '.json', '.jsx', '.ts', '.tsx', '.svg'],
+    alias: {
+      // faker: path.resolve('./node_modules/faker'),
+      react: path.resolve('./node_modules/react'),
+      'react-dom': path.resolve('./node_modules/react-dom'),
+      lodash: path.resolve('./node_modules/lodash'),
+      nanoid: path.resolve('./node_modules/nanoid'),
+      'awesome-notifications': path.resolve(
+        './node_modules/awesome-notifications'
+      ),
+      '@babel/runtime': path.resolve('./node_modules/@babel/runtime'),
+      'monaco-editor': path.resolve('./node_modules/monaco-editor'),
+    },
+    fallback: {
+      fs: false,
+    },
+  },
   plugins,
   module: { rules },
 };