Optimize webpack configs + Upgrade UICore to 4.1.1 (#1220)

web/config/moduleFederation.config.js

@@ -15,7 +15,7 @@
  */
 
 const packageJSON = require('../package.json')
-const { pick, omit, mapValues } = require('lodash')
+const { pick, mapValues } = require('lodash')
 
 /**
  * These packages must be stricly shared with exact versions

web/config/webpack.common.js

@@ -16,12 +16,12 @@
 
 const path = require('path')
 
-const webpack = require('webpack')
 const {
   container: { ModuleFederationPlugin },
   DefinePlugin
 } = require('webpack')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const HTMLWebpackPlugin = require('html-webpack-plugin')
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
 const GenerateStringTypesPlugin = require('../scripts/webpack/GenerateStringTypesPlugin').GenerateStringTypesPlugin
 const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin')
@@ -42,9 +42,9 @@ module.exports = {
   },
   output: {
     publicPath: 'auto',
-    filename: DEV ? 'static/[name].js' : 'static/[name].[contenthash:6].js',
-    chunkFilename: DEV ? 'static/[name].[id].js' : 'static/[name].[id].[contenthash:6].js',
-    pathinfo: false
+    pathinfo: false,
+    filename: '[name].[contenthash:6].js',
+    chunkFilename: '[name].[id].[contenthash:6].js'
   },
   module: {
     rules: [
@@ -168,6 +168,17 @@ module.exports = {
             loader: 'file-loader'
           }
         ]
+      },
+      {
+        test: /\.md$/,
+        use: [
+          {
+            loader: 'raw-loader',
+            options: {
+              esModule: false
+            }
+          }
+        ]
       }
     ]
   },
@@ -176,6 +187,18 @@ module.exports = {
     plugins: [new TsconfigPathsPlugin()]
   },
   plugins: [
+    new MiniCssExtractPlugin({
+      ignoreOrder: true,
+      filename: '[name].[contenthash:6].css',
+      chunkFilename: '[name].[id].[contenthash:6].css'
+    }),
+    new HTMLWebpackPlugin({
+      template: 'src/index.html',
+      filename: 'index.html',
+      favicon: 'src/favicon.svg',
+      minify: false,
+      templateParameters: {}
+    }),
     new ModuleFederationPlugin(moduleFederationConfig),
     new DefinePlugin({
       'process.env': '{}', // required for @blueprintjs/core

web/config/webpack.dev.js

@@ -15,26 +15,17 @@
  */
 
 const path = require('path')
-const util = require('util')
-const fs = require('fs')
 
 require('dotenv').config()
 
 const { merge } = require('webpack-merge')
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const HTMLWebpackPlugin = require('html-webpack-plugin')
-const {
-  DefinePlugin,
-  WatchIgnorePlugin,
-  container: { ModuleFederationPlugin }
-} = require('webpack')
-
 const commonConfig = require('./webpack.common')
+
 const API_URL = process.env.API_URL ?? 'http://localhost:3000'
 const HOST = 'localhost'
 const PORT = process.env.PORT ?? 3020
 const STANDALONE = JSON.parse(process.env.STANDALONE ?? 'true')
+const CONTEXT = process.cwd()
 
 console.info(`Starting development build... http://${HOST}:${PORT}`)
 console.info('Environment variables:')
@@ -42,16 +33,10 @@ console.table({ STANDALONE, HOST, PORT, API_URL })
 
 const devConfig = {
   mode: 'development',
-  target: 'web',
-  entry: './src/index.tsx',
+  context: CONTEXT,
+  entry: path.resolve(CONTEXT, '/src/index.tsx'),
   devtool: 'cheap-module-source-map',
   cache: { type: 'filesystem' },
-  output: {
-    filename: '[name].js',
-    chunkFilename: '[name].[id].js',
-    path: path.resolve(process.cwd(), 'dist'),
-    pathinfo: false
-  },
   ...(STANDALONE
     ? {
         optimization: {
@@ -75,43 +60,6 @@ const devConfig = {
       }
     },
     compress: false
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-      chunkFilename: '[name].[id].css',
-      ignoreOrder: true
-    }),
-    new HTMLWebpackPlugin({
-      publicPath: '/',
-      template: 'src/index.html',
-      filename: 'index.html',
-      favicon: 'src/favicon.svg',
-      minify: false,
-      templateParameters: {
-        __DEV__: true
-      }
-    }),
-    new DefinePlugin({
-      'process.env': '{}', // required for @blueprintjs/core
-      __DEV__: true,
-      __ENABLE_CDN__: false
-    })
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.md$/,
-        use: [
-          {
-            loader: 'raw-loader',
-            options: {
-              esModule: false
-            }
-          }
-        ]
-      }
-    ]
   }
 }
 

web/config/webpack.prod.js

@@ -15,23 +15,15 @@
  */
 
 const { merge } = require('webpack-merge')
-const path = require('path')
-const HTMLWebpackPlugin = require('html-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const { DefinePlugin } = require('webpack')
-
 const commonConfig = require('./webpack.common')
 const CONTEXT = process.cwd()
+const path = require('path')
 
 const prodConfig = {
   context: CONTEXT,
-  entry: path.resolve(CONTEXT, '/src/index.tsx'),
   mode: 'production',
+  entry: path.resolve(CONTEXT, '/src/index.tsx'),
   devtool: process.env.ENABLE_SOURCE_MAP ? 'source-map' : false,
-  output: {
-    filename: '[name].[contenthash:6].js',
-    chunkFilename: '[name].[id].[contenthash:6].js'
-  },
   optimization: {
     splitChunks: {
       chunks: 'all',
@@ -51,21 +43,7 @@ const prodConfig = {
         }
       }
     }
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      ignoreOrder: true,
-      filename: '[name].[contenthash:6].css',
-      chunkFilename: '[name].[id].[contenthash:6].css'
-    }),
-    new HTMLWebpackPlugin({
-      template: 'src/index.html',
-      filename: 'index.html',
-      favicon: 'src/favicon.svg',
-      minify: false,
-      templateParameters: {}
-    })
-  ]
+  }
 }
 
 module.exports = merge(commonConfig, prodConfig)

web/package.json

@@ -45,7 +45,7 @@
     "@codemirror/view": "^6.9.6",
     "@harnessio/design-system": "^2.1.1",
     "@harnessio/icons": "^2.1.0",
-    "@harnessio/uicore": "^4.1.0",
+    "@harnessio/uicore": "^4.1.1",
     "@types/dompurify": "^3.0.2",
     "@types/react-monaco-editor": "^0.16.0",
     "@uiw/codemirror-extensions-color": "^4.19.9",

web/yarn.lock

@@ -1640,10 +1640,10 @@
   resolved "https://registry.npmjs.org/@harnessio/icons/-/icons-2.1.0.tgz#9d93d5a4080e76d4f1b435ca2d28266d0ba936d0"
   integrity sha512-9DFu0v+Q0nx2HeJb7lWaWA6lnokSPcAKnjBDi87BWaY6SXbCn8Tk5wqWSnv/V2Xmn05iN89hjnuAjOhTuSpxXA==
 
-"@harnessio/uicore@^4.1.0":
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/@harnessio/uicore/-/uicore-4.1.0.tgz#e7b18ce59ddbde07441b9a5da8250b0cdd35f91e"
-  integrity sha512-NUJt5ZD3PP55QR9mLhvRCn2uUhy18uY+Lv9z5J37Hoc+e5DVtnp6FG/ZNvqPpSXnnvQ3bFGElf8AD4bJmIs9Hg==
+"@harnessio/uicore@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/@harnessio/uicore/-/uicore-4.1.1.tgz#958e7109489d7551fa3b6a01cbd2286479c61701"
+  integrity sha512-uR88UW+ZN8n9yzxTnGp4bmmdR6eJacgsBfW5K3N7WQ3ISAmMB09842w2Y6sFiDUD8+RB4UqlOuBrjVUmrZroVg==
 
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"