chore: webpack optimised

poc created with HtmlWebpackPlugin to remove pug files

webpack.config.js

@@ -4,7 +4,7 @@ require('dotenv').config();
 const webpack = require('webpack');
 const path = require('path');
 // eslint-disable-next-line import/no-extraneous-dependencies
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+// const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { Environment } = require('./scripts/constants');
@@ -15,24 +15,45 @@ const metadata = require('./package.json');
 
 exports.common = {
   entry: {
-    app: path.join(
+    index: path.join(
       __dirname,
       './packages/firecamp-core/src/containers/index.tsx'
     ),
-    identity: path.join(
-      __dirname,
-      './packages/firecamp-core/src/containers/identity.tsx'
-    ),
+    // identity: path.join(
+    //   __dirname,
+    //   './packages/firecamp-core/src/containers/identity.tsx'
+    // ),
   },
   optimization: {
     nodeEnv: process.env.NODE_ENV,
-    minimize: false,
+    minimize: true,
+    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');
+      // 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('@', '')}`;
+          },
+        },
       },
     },
   },
@@ -56,14 +77,17 @@ exports.common = {
   },
 };
 
+const outputPath = `${__dirname}/build/${env}`;
+const publicPath = '';
 exports.output = {
   globalObject: 'this',
   filename: '[name].bundle.js',
   chunkFilename: '[name].bundle.js',
-  publicPath: '/js',
+  path: outputPath,
+  publicPath,
 };
 
-exports.output.path = path.join(__dirname, `./build/${env}/js`);
+// exports.output.path = path.join(__dirname, `./build/${env}`);
 if (env === Environment.Development) exports.output.clean = true;
 
 exports.env = {
@@ -95,8 +119,9 @@ exports.env = {
 
 exports.plugins = [
   new HtmlWebpackPlugin({
-    inject: false,
-    template: path.join(__dirname, `./build/${env}/index.html`),
+    inject: true,
+    filename: '[name].html',
+    template: 'templates/index.html',
   }),
   new NodePolyfillPlugin(),
   new webpack.ProgressPlugin({