webpack.config.js

require('dotenv').config();
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const HtmlWebpackEsmodulesPlugin = require('webpack-module-nomodule-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const babelConfig = require('./.babelrc');
const PreactRefreshPlugin = require('@prefresh/webpack');

const env = babelConfig.env;
const modernTerser = new TerserPlugin({
  cache: true,
  parallel: true,
  sourceMap: true,
  terserOptions: {
    compress: {
      keep_infinity: true,
      pure_getters: true,
      passes: 10,
    },
    output: {
      // By default, Terser wraps function arguments in extra parens to trigger eager parsing.
      wrap_func_args: false,
    },
    ecma: 8,
    safari10: true,
    toplevel: true,
  }
});

const makeConfig = (mode) => {
  const { NODE_ENV } = process.env;
  const isProduction = NODE_ENV === 'production';
  const apiUrl = process.env.DEPLOY_PRIME_URL ?
    process.env.DEPLOY_PRIME_URL + '/.netlify/functions/graphql' :
    process.env.API_URL
  // Build plugins
  const plugins = [
    new HtmlWebpackPlugin({ inject: true, template: './index.html' }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
      'process.env.API_URL': JSON.stringify(apiUrl),
    }),
  ];

  if (!isProduction) {
    plugins.push(new PreactRefreshPlugin());
    plugins.push(new webpack.HotModuleReplacementPlugin());
    // plugins.push(new BundleAnalyzerPlugin());
  } else {
    plugins.push(new HtmlWebpackEsmodulesPlugin(mode))
    // plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }));
  }

  // Return configuration
  return {
    mode: isProduction ? 'production' : 'development',
    entry: mode === 'legacy' ? {
      fetch: 'whatwg-fetch',
      main: './src/index.tsx',
    } : {
      main: './src/index.tsx'
    },
    context: path.resolve(__dirname, './'),
    stats: 'normal',
    devtool: isProduction ? '' : 'eval-source-map',
    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      host: 'localhost',
      port: 3000,
      historyApiFallback: true,
      hot: true,
      inline: true,
      publicPath: '/',
      clientLogLevel: 'none',
      open: true,
      overlay: true,
    },
    output: {
      chunkFilename: `[name]-[contenthash]${mode === 'modern' ? '.modern.js' : '.js'}`,
      filename: isProduction ? `[name]-[contenthash]${mode === 'modern' ? '.modern.js' : '.js'}` : `[name]${mode === 'modern' ? '.modern.js' : '.js'}`,
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/',
    },
    optimization: {
      minimizer: mode === 'legacy' ? undefined : [modernTerser],
    },
    plugins,
    resolve: {
      mainFields: ['module', 'main', 'browser'],
      extensions: [".tsx", ".ts", ".mjs", ".js", ".jsx"],
      alias: {
        preact: path.resolve(__dirname, 'node_modules', 'preact'),
        ...(mode === 'modern' ? { 'url': 'native-url' } : {})
      },
    },
    module: {
      rules: [
        {
          // This is to support our `graphql` dependency, they expose a .mjs bundle instead of .js
          // Sneaky sneaky sir graphql.
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto',
        },
        {
          // Pre-compile graphql strings.
          test: /\.(graphql|gql)$/,
          exclude: /node_modules/,
          loader: 'graphql-tag/loader'
        },
        {
          test: /\.(png|jpe?g|gif)$/,
          use: [
            {
              loader: 'file-loader',
              options: {},
            },
          ],
        },
        {
          // Allows us to debug our typescript just like js.
          test: /\.js$/,
          enforce: 'pre',
          exclude: /node_modules/,
          loader: 'source-map-loader',
        },
        {
          // Makes our babel-loader the lord and savior over our TypeScript
          test: /\.ts$|\.tsx$/,
          include: [
            path.resolve(__dirname, "src"),
          ],
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            ...env[mode],
          }
        },
      ],
    },
  };
};

module.exports = process.env.NODE_ENV === 'production' ?
  [makeConfig('modern'), makeConfig('legacy')] :
  makeConfig('modern');