chore: adds back webpack to ui if we need it

packages/ui/package.json

@@ -6,6 +6,8 @@
     "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
     "build:swc": "swc ./src -d ./dist --config-file .swcrc",
     "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "build:webpack": "webpack --config webpack.config.js",
+    "build:remove-artifact": "rm dist/prod/index.js",
     "clean": "rimraf {dist,*.tsbuildinfo}",
     "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
     "fix": "eslint \"src/**/*.{ts,tsx}\" --fix",

packages/ui/webpack.config.js

@@ -0,0 +1,114 @@
+import OptimizeCSSAssetsPlugin from 'css-minimizer-webpack-plugin'
+import MiniCSSExtractPlugin from 'mini-css-extract-plugin'
+import path from 'path'
+import TerserJSPlugin from 'terser-webpack-plugin'
+import { fileURLToPath } from 'url'
+import webpack from 'webpack'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+const componentWebpackConfig = {
+  entry: path.resolve(dirname, './src/index.ts'),
+  externals: [
+    'react',
+    'react-dom',
+    'payload',
+    'payload/config',
+    'react-image-crop',
+    'payload/operations',
+  ],
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        oneOf: [
+          {
+            // exclude: /node_modules/,
+            test: /\.(t|j)sx?$/,
+            use: [
+              {
+                loader: 'swc-loader',
+                options: {
+                  jsc: {
+                    experimental: {
+                      plugins: [
+                        // clear the plugins used in .swcrc
+                      ],
+                    },
+                    parser: {
+                      syntax: 'typescript',
+                      tsx: true,
+                    },
+                  },
+                },
+              },
+            ],
+          },
+          {
+            sideEffects: true,
+            test: /\.(scss|css)$/,
+            use: [
+              MiniCSSExtractPlugin.loader,
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    plugins: ['postcss-preset-env'],
+                  },
+                },
+              },
+              'sass-loader',
+            ],
+          },
+          {
+            type: 'asset/resource',
+            generator: {
+              filename: 'payload/[name][ext]',
+            },
+            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/, /\.woff$/, /\.woff2$/],
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new TerserJSPlugin({
+        extractComments: false,
+      }),
+      new OptimizeCSSAssetsPlugin({}),
+    ],
+  },
+  output: {
+    filename: 'index.js',
+    libraryTarget: 'commonjs2',
+    path: path.resolve(dirname, './dist/prod'),
+    publicPath: '/',
+  },
+  plugins: [
+    new MiniCSSExtractPlugin({
+      filename: 'styles.css',
+      ignoreOrder: true,
+    }),
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
+  ],
+  resolve: {
+    extensionAlias: {
+      '.js': ['.ts', '.tsx', '.js', '.scss', '.css'],
+      '.mjs': ['.mts', '.mjs'],
+    },
+    extensions: ['.js', '.ts', '.tsx', '.scss', '.css'],
+    modules: [
+      'node_modules',
+      path.resolve(dirname, '../../node_modules'),
+      path.resolve(dirname, './node_modules'),
+    ],
+  },
+  stats: 'errors-only',
+}
+
+export default componentWebpackConfig