@pega/constellation-dx-components-build-utils/webpack.config.js

This tool uses a 'v3' approach to group components in a library, create a component map, employ webpack, and load the library like Pega-generated components, constellation app-static.

const path = require('path');
const customDonePlugin = require('./plugins/CustomDonePlugin');
const dynamicFetchScriptHookPlugin = require('./plugins/DynamicFetchScriptHookPlugin');
const SourceMapDevToolPlugin = require('webpack').SourceMapDevToolPlugin;
const webpack = require('webpack');
const { StatsWriterPlugin } = require('webpack-stats-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

const compressionBRConfObj = {
  filename: '[path][base].br',
  algorithm: 'brotliCompress',
  test: /\.(js|css|html|svg|png|jpg|woff|woff2)$/,
  compressionOptions: { level: 11 }
};

const imageInlineSizeLimit = Number.parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '10000', 10);

module.exports = (env) => {
    return {
      mode: 'production',
      entry: './src/index.js',
      output: {
        path: path.resolve(env.buildFolderFullPath),
        filename: 'componentsmap.js',
        chunkFilename: env.v3 == 'true' ? '[name].[contenthash:8].js' : 'chunks/[name].[contenthash:8].js'
      },
      devtool: 'source-map',
      module: {
        rules: [
          {
            test: /\.(?:js|mjs|jsx|cjs|ts|tsx)$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [
                  ['@babel/preset-env', { targets: "defaults" }],
                  ['@babel/preset-react', { runtime: "automatic" }],
                  ['@babel/preset-typescript']
                ]
              }
            }
          },
          {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.s[ac]ss$/i,
            use: ["style-loader", "css-loader", "sass-loader"],
          },
          {
            test: /\.(png|bmp|svg|jpe?g|gif)$/i,
            loader: 'url-loader',
            options: {
              limit: imageInlineSizeLimit,
              name: 'images/[name].[contenthash:4].[ext]',
            },
          }
        ]
      },
      plugins: [
        ...(env.v3 === 'true' ? [] : [ new SourceMapDevToolPlugin({
          append: '\n//# sourceMappingURL='+env.appStaticUrl+'/component/'+env.buildFolderName+':'+env.packageVersion+'/chunks/[url]?orgId='+env.orgId,
          filename: '[file].map[query]',
        })]),
        new customDonePlugin({ projectName: path.resolve(""), libName : env.buildFolderName, libVersion : env.packageVersion }),
        ...(env.v3 === 'true' ? [] : [
          new dynamicFetchScriptHookPlugin(),
        ]),
        new webpack.IgnorePlugin({
          resourceRegExp: /^\.\/locale$/,
          contextRegExp: /moment$/
        }),
        /* Ignore cosmos icons */
        new webpack.IgnorePlugin({
          resourceRegExp: /^\.\/icons$/,
          contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
        }),

        /* Ignore cosmos icons - windows */
        new webpack.IgnorePlugin({
          resourceRegExp: /^\.\/icons$/,
          contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
        }),

        /* Ignore cosmos streamline-icons */
        new webpack.IgnorePlugin({
          resourceRegExp: /^\.\/streamline-icons$/,
          contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
        }),

        /* Ignore cosmos streamline-icons - windows */
        new webpack.IgnorePlugin({
          resourceRegExp: /^\.\/streamline-icons$/,
          contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
        }),

        /* cosmos 6.x and above */
        new webpack.IgnorePlugin({
          resourceRegExp: /^\.\/.*\/.*\.icon$/,
          contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
        }),

        /* Ignore cosmos icons - windows */
        new webpack.IgnorePlugin({
          resourceRegExp: /^\.\/.*\/.*\.icon$/,
          contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
        }),

        new CompressionPlugin(compressionBRConfObj),

        /* To generate Manifest */
        new StatsWriterPlugin({
          stats: {
            fields: ["assets"]
          },
          filename: "stats.json",
        })

      ],
      externals: {
        "react": "React",
        "react-dom": "ReactDOM"
      },
      resolve: {
        extensions: ['.ts', '.js', '.jsx', '.tsx'],
        fallback: {
          stream: require.resolve('stream-browserify'),
          os: require.resolve('os-browserify/browser'),
          perf_hooks: false,
          module: require.resolve("module"),
          path: require.resolve("path-browserify"),
          browser: require.resolve('os-browserify/browser'),
          "fs": false,
          "constants": require.resolve("constants-browserify")
        }
      },
      optimization: {
        splitChunks: {
          chunks: 'all',
          minSize: 60000,
          maxSize: 300000
        },
      }
    }
};