chore: webpack build improvement

2025-12-06 04:19:43 +00:00 · 2023-08-03 13:06:04 +05:30
parent 11d6fed3a6
commit 59689cd3df
3 changed files with 111 additions and 117 deletions
--- a/webpack.common.js
+++ b/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 },
 };
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -1,7 +1,8 @@
 const path = require('path');
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const TerserPlugin = require('terser-webpack-plugin');
 const base = require('./webpack.common');

 // const withReport = process.env.npm_config_withReport;
@@ -9,9 +10,25 @@ const base = require('./webpack.common');
 module.exports = merge(base, {
  mode: 'development',
  devtool: 'cheap-module-source-map',
-  output: { clean: true },
+  output: {
+    clean: true,
+    globalObject: 'this',
+    filename: '[name].dev.js',
+    chunkFilename: '[name].dev.js',
+    path: `${__dirname}/build/${env}`,
+    publicPath: '',
+  },
  optimization: {
    nodeEnv: 'development',
+    minimizer: [
+      new TerserPlugin({
+        parallel: 4,
+        minify: TerserPlugin.esbuildMinify,
+        // terserOptions: {
+        //   sourceMap: 'external',
+        // },
+      }),
+    ],
  },
  devServer: {
    //server: 'https',
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -10,14 +10,15 @@ const nodeEnv = process.env.NODE_ENV;
 const config = merge(base, {
  mode: 'production',
  output: {
+    clean: true,
    globalObject: 'this',
-    filename: '[name].bundle.js',
-    chunkFilename: '[name].bundle.js',
+    filename: '[name].min.js',
+    chunkFilename: '[name].min.js',
    path: path.join(__dirname, `./build/${nodeEnv}`),
  },
  optimization: {
    nodeEnv: 'production',
-    minimize: true,
+    // minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: 4,
@@ -29,9 +30,7 @@ const config = merge(base, {
    ],
  },
  plugins: [
-    new webpack.ProvidePlugin({
-      React: 'react',
-    }),
+    new webpack.ProvidePlugin({ React: 'react' }),
    new webpack.IgnorePlugin({ resourceRegExp: /[^/]+\/[\S]+.prod$/ }),
    // new CompressionPlugin(),
  ],