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');
+console.log(process.env.FIRECAMP_API_HOST, 'FIRECAMP_API_HOST'); // for debugging purposes. remove when ready.
-
-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
-  ),
-};
 
 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,
+  entry: {
-  output,
+    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 },
 };

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',

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',
+    filename: '[name].min.js',
-    chunkFilename: '[name].bundle.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({
+    new webpack.ProvidePlugin({ React: 'react' }),
-      React: 'react',
-    }),
     new webpack.IgnorePlugin({ resourceRegExp: /[^/]+\/[\S]+.prod$/ }),
     // new CompressionPlugin(),
   ],