webpack.config.js

/* jshint esversion: 6 */
const CopyPlugin = require('copy-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SourceMapDevToolPlugin = require('webpack/lib/SourceMapDevToolPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const UnusedWebpackPlugin = require('unused-webpack-plugin');
const WebpackShellPluginNext = require('webpack-shell-plugin-next');
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { execSync } = require('child_process');
const { DateTime } = require('luxon');

const port = process.env.PORT || 4000;
const isHTTPS = process.env.PROTOCOL && process.env.PROTOCOL === 'HTTPS';
const isWebApp = !process.env.npm_lifecycle_script.includes('CORDOVA=1');
const useRealCerts = process.env.npm_lifecycle_script.includes('USE_REAL_CERTS=1');
const host = process.env.HOSTNAME || (useRealCerts ? 'wevotedeveloper.com' : 'localhost');
// const isProduction = process.env.npm_lifecycle_script.includes('PRODUCTION=1');
const source = isWebApp ? 'src' : 'srcCordova';
const bundleAnalysis = process.env.ANALYSIS || false;  // enable the interactive bundle analyser and the Unused component analyzer
const minimized = process.env.MINIMIZED === '1' || false;  // enable the Terser plugin that strips comments and shrinks long variable names
const verBits = process.version.split('.');
const major = parseInt(verBits[0].replace('v', ''));
const sslKey = process.env.HTTPS_SSL_KEY || (useRealCerts ? `./${source}/cert/wevotedeveloper.com_key.txt` : `./${source}/cert/server.key`);
const sslCert = process.env.HTTPS_SSL_CERT || (useRealCerts ? `./${source}/cert/wevotedeveloper.com.crt` : `./${source}/cert/server.crt`);
if (major < 22) {
  console.error(`The minimum Node version is: v22.0.0, but you are running ${process.version}\n`);
} else {
  console.log(`Node version is: ${process.version}`);
}
const sslOptions = {};
if (useRealCerts) {
  console.log('useRealCerts in webpack.config.js ', useRealCerts);
  // Override SSL options for testing with Cordova and real authoritative certs
  //sslOptions.requestCert = true;
  //sslOptions.passphrase = 'webpack-dev-server';
}
// console.log('key: ', fs.readFileSync(sslKey).toString());
// console.log('cert: ', fs.readFileSync(sslCert).toString());

async function getStatusValues () {
  const stats = {};
  try {
    stats.nodeVersion = execSync('node --version').toString().trim();
    stats.npmVersion = execSync('npm --version').toString().trim();
  } catch (error) {
    console.log('ERROR in getGitValues node/npm: ', error);
  }
  try {
    console.log('Working Directory: ', __dirname);
    stats.NODISPLAY_dirname  = __dirname;
    const files = fs.readdirSync(__dirname);
    console.log(JSON.stringify(files));
    stats.NODISPLAY_root_dir_files = JSON.stringify(files);
    // set default values
    stats.Pull_request = 'none';
    stats.Git_committed_date = 'none';
    stats.Git_commit_hash = 'Not Found';
    try {
      let hash = fs.readFileSync('./git_commit_hash', 'utf8');
      hash = hash.trim();
      if (hash) {
        stats.NODISPLAY_hash = hash;
        console.log('Hash: ', hash);
        const hashURL = `https://github.com/wevote/weconnect-client/commit/${hash}`;
        console.log('hashURL: ', hashURL);
        stats.NODISPLAY_hashURL  = hashURL;

        // Use the GitHub REST API instead of scraping HTML — works for all commit types
        const apiHeaders = { Accept: 'application/vnd.github.v3+json', 'User-Agent': 'weconnect-client-build' };

        // Get commit details (date)
        const commitResponse = await fetch(`https://api.github.com/repos/wevote/weconnect-client/commits/${hash}`, { headers: apiHeaders });
        if (!commitResponse.ok) {
          throw new Error(`GitHub API returned ${commitResponse.status} for commit ${hash}`);
        }
        const commitData = await commitResponse.json();
        let committedDate;
        try {
          committedDate = commitData.commit.committer.date || commitData.commit.author.date;
        } catch (error) {
          committedDate = commitData.commit.author.date;
        }
        console.log('committedDate: ', committedDate);
        const date = new DateTime(committedDate);
        stats.Git_committed_date = date.toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS);
        stats.Git_commit_hash = `<a href="${hashURL}">${hash}</a>`;

        // Get associated pull request number
        const prsResponse = await fetch(`https://api.github.com/repos/wevote/weconnect-client/commits/${hash}/pulls`, { headers: apiHeaders });
        if (prsResponse.ok) {
          const prs = await prsResponse.json();
          if (prs.length > 0) {
            stats.Pull_request = `#${prs[0].number}`;
            console.log('Pull_request: ', stats.Pull_request);
          } else {
            stats.Pull_request = 'none';
          }
        }
      }
    } catch (error) {
      console.log('Error reading git_commit_hash file:', error);
    }
  } catch (error) {
    console.log('Error in getStatusValues git: ', error);
    stats.Pull_request = 'none';
    stats.Git_committed_date = 'none';
    stats.Git_commit_hash = 'none';
  }

  return stats;
}

module.exports = async (env, argv) => {
  const stats = await getStatusValues();
  console.log('getStatusValues', JSON.stringify(stats));
  return {
    entry: path.resolve(__dirname, `./${source}/index.jsx`),
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules|srcDeprecated/,
          use: ['babel-loader'],
        },
        {
          test: /\.(png|jp(e*)g|svg|eot|woff|ttf)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                publicPath: '/',
                exclude: /srcDeprecated/,
                name: '[path][name].[ext]',
              },
            },
          ],
        },
      ],
    },
    optimization: {
      minimize: minimized,
      minimizer: [
        ...(minimized ? [
          new TerserPlugin({
            parallel: true,
            terserOptions: {
              // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
              format: {
                comments: false,
              },
            },
          }),
        ] : []),
        new CssMinimizerPlugin({
          test: /\.css$/i,
          minimizerOptions: {
            preset: [
              'default',
              {
                discardComments: { removeAll: true },
              },
            ],
          },
        }),
      ],
    },
    resolve: {
      modules: [path.resolve(__dirname, source), 'node_modules'],
      extensions: ['*', '.js', '.jsx'],
      alias: {
        '@mui/styled-engine': '@mui/styled-engine-sc',
      },
    },
    output: {
      path: path.resolve(__dirname, './build'),
      filename: isWebApp ? '[name].[contenthash].js' : 'bundle.js',
      publicPath: isWebApp ? '/' : undefined,
    },
    // source-map is for OpenReplay
    devtool: 'source-map',
    plugins: [
      new CleanWebpackPlugin(),
      new ESLintPlugin({ failOnError: false, failOnWarning: false  }),
      new HtmlWebpackPlugin({
        title: 'WeConnect',
        template: path.resolve(__dirname, `./${source}/index.html`),
      }),
      ...(bundleAnalysis ? [
        new UnusedWebpackPlugin({  // Set ANALYSIS to true to list (likely) unused files
          directories: [path.join(__dirname, source)],
          exclude: [
            '/**/cert/',
            '/**/global/svg-icons/',
            '/*.test.js',
            '/**/config*.*',
            'extension.html',
            '/sass/',
            '/robots.txt',
            'srcDeprecated',
          ],
          root: __dirname,
        }),
        new BundleAnalyzerPlugin(),
      ] : []),
      new CopyPlugin({
        patterns: [
          { from: `${source}/robots.txt`,  to: '.' },
          {
            from: `${source}/img`,
            to: 'img/',
            globOptions: { ignore: ['**/DO-NOT-BUNDLE/**']},
          },
        ],
      }),
      new WebpackShellPluginNext({
        onBuildEnd: {
          scripts: ['node ./src/js/common/node/webPackPostBuild.js'],
          blocking: false,
          parallel: true,
        },
      }),
      ...(argv.mode === 'production' ? [
        new webpack.DefinePlugin({
          // We need to get webpack into production mode, to make it include the much smaller minimized libraries
          // especially for React itself.
          // PRODUCTION: JSON.stringify(true),
          'process.env.NODE_ENV': JSON.stringify('production'),
          WEBPACK_NODE_VERSION: JSON.stringify(stats.nodeVersion),
          WEBPACK_NPM_VERSION: JSON.stringify(stats?.npmVersion || 'none'),
          WEBPACK_PULL_REQUEST: JSON.stringify(stats?.Pull_request || 'none'),
          WEBPACK_GIT_DATE: JSON.stringify(stats?.Git_committed_date || 'none'),
          WEBPACK_GIT_HASH: JSON.stringify(stats?.Git_commit_hash || 'none'),
          WEBPACK_NODISPLAY_DIRNAME: JSON.stringify(stats.NODISPLAY_dirname  || 'none'),
          WEBPACK_NODISPLAY_ROOT_DIR_FILES: JSON.stringify(stats.NODISPLAY_root_dir_files  || 'none'),
        }),
      ] : [
        new webpack.DefinePlugin({
          WEBPACK_NODE_VERSION: JSON.stringify(stats?.nodeVersion || 'none'),
          WEBPACK_NPM_VERSION: JSON.stringify(stats?.npmVersion || 'none'),
          WEBPACK_PULL_REQUEST: JSON.stringify(stats?.Pull_request || 'none'),
          WEBPACK_GIT_DATE: JSON.stringify(stats?.Git_committed_date || 'none'),
          WEBPACK_GIT_HASH: JSON.stringify(stats?.Git_commit_hash || 'none'),
          WEBPACK_NODISPLAY_DIRNAME: JSON.stringify(stats.NODISPLAY_dirname  || 'none'),
          WEBPACK_NODISPLAY_ROOT_DIR_FILES: JSON.stringify(stats.NODISPLAY_root_dir_files  || 'none'),
        }),
        new SourceMapDevToolPlugin({
          filename: isWebApp ? null : '[file].map', // if no value is provided the sourcemap is inlined
          exclude: [/node_modules/, /css/],
        }),
      ]),
    ],
    devServer: {
      allowedHosts: ['wevotedeveloper.com', 'localhost'],
      static: {
        directory: path.join(__dirname, './build/index.html'),
      },
      host,
      port,
      historyApiFallback: true,
      ...(isHTTPS ? {
        server: {
          type: 'https',
          options: {
            ...sslOptions,
            key: fs.readFileSync(sslKey),
            cert: fs.readFileSync(sslCert)
          },
        },
      } : {}),
      client: {
        overlay: {
          runtimeErrors: (error) => !error.message.includes('ResizeObserver loop'),
        },
      },
    },
  };
};