pixelplanet/webpack.config.client.babel.js.old

/**
 * This is an old webpack config that uses ttag-webpack-plugin
 * Sadly this plugin has issues with webpack 5, so we can't use it.
 * But we keep this config around, so that we can adjust in the case it
 * might become stable.
 *
 * https://github.com/ttag-org/ttag-webpack-plugin/issues
 */

import fs from 'fs';
import path from 'path';
import webpack from 'webpack';
import AssetsPlugin from 'assets-webpack-plugin';
import TtagWebpackPlugin from 'ttag-webpack-plugin';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';

import pkg from './package.json';

const isDebug = process.argv.includes('--debug');
const VERBOSE = false;
const isAnalyze = process.argv.includes('--analyze')
  || process.argv.includes('--analyse');

// activate for deprecation tracking
// process.traceDeprecation = true;

const babelPlugins = [
  '@babel/transform-flow-strip-types',
  ['@babel/plugin-proposal-decorators', { legacy: true }],
  '@babel/plugin-proposal-function-sent',
  '@babel/plugin-proposal-export-namespace-from',
  '@babel/plugin-proposal-numeric-separator',
  '@babel/plugin-proposal-throw-expressions',
  ['@babel/plugin-proposal-class-properties', { loose: true }],
  '@babel/proposal-object-rest-spread',
  // react-optimize
  '@babel/transform-react-constant-elements',
  '@babel/transform-react-inline-elements',
  'transform-react-remove-prop-types',
  'transform-react-pure-class-to-function',
];

/*
 * get all available languages
 */
const langDir = path.resolve(__dirname, 'i18n');
const langs = fs.readdirSync(langDir)
  .filter((e) => e.endsWith('.po'))
  .map((l) => l.slice(0, -3));

/*
 * create list of translations for ttag-webpack-plugin
 */
const translations = {};
for (let i = 0; i < langs.length; i += 1) {
  const lang = langs[i];
  translations[lang] = path.resolve(langDir, `${lang}.po`);
}

/*
 * Cache Groups for splitChunks
 * (edit cache groups here, make sure that chunks is based on name)
 */
const cacheGroups = {
  default: false,
  defaultVendors: false,

  vendor: {
    name: 'vendor',
    chunks: (chunk) => chunk.name === 'client',
    test: /[\\/]node_modules[\\/]/,
  },
  three: {
    name: 'three',
    chunks: (chunk) => (chunk.name === 'globe' || chunk.name === 'voxel'),
    test: /[\\/]node_modules[\\/]three[\\/]/,
  },
};


/*
 * automatically add Cache Groups for languages based on
 * manually set cacheGroups
 */
const groups = Object.keys(cacheGroups);
for (let u = 0; u < groups.length; u += 1) {
  const group = cacheGroups[groups[u]];
  if (!group.test) continue;

  for (let i = 0; i < langs.length; i += 1) {
    const lang = langs[i];
    /* add lang */
    const key = `${groups[u]}-${lang}`;
    const name = `${group.name}-${lang}`;
    const { test, chunks } = group;

    cacheGroups[key] = {
      name,
      chunks: (chunk) => {
        if (!chunk.name.endsWith(`-${lang}`)) {
          return false;
        }
        return chunks({
          name: chunk.name.slice(0, -lang.length - 1),
        });
      },
      test,
    };
  }
}


export default {
  name: 'client',
  target: 'web',

  context: __dirname,
  mode: (isDebug) ? 'development' : 'production',
  devtool: 'source-map',

  entry: {
    client: ['./src/client.js'],
    globe: ['./src/globe.js'],
  },

  output: {
    path: path.resolve(__dirname, 'build', 'public', 'assets'),
    publicPath: '/assets/',
    pathinfo: VERBOSE,
    filename: isDebug ? '[name].js' : '[name].[chunkhash:8].js',
    chunkFilename: isDebug ? '[name].chunk.js' : '[name].[chunkhash:8].js',
  },

  resolve: {
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
  },

  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: 'react-svg-loader',
            options: {
              svgo: {
                plugins: [
                  {
                    removeViewBox: false,
                  },
                  {
                    removeDimensions: true,
                  },
                ],
              },
              jsx: false,
            },
          },
        ],
      },
      {
        test: /\.(js|jsx|ts|tsx)$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'src'),
        ],
        options: {
          cacheDirectory: isDebug,
          babelrc: false,
          presets: [
            ['@babel/preset-env', {
              targets: {
                browsers: pkg.browserslist,
              },
              modules: false,
              useBuiltIns: 'usage',
              corejs: {
                version: 3,
              },
              debug: false,
            }],
            '@babel/typescript',
            '@babel/react',
          ],
          plugins: babelPlugins,
        },
      },
      {
        test: /\.css/,
        use: ['style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: isDebug,
              modules: false,
            },
          },
        ],
      },
    ],
  },

  plugins: [
    // Define free variables
    // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': isDebug ? '"development"' : '"production"',
      'process.env.BROWSER': true,
    }),

    // make multiple bundles for each language
    new TtagWebpackPlugin({
      translations,
    }),

    // Emit a file with assets paths
    // https://github.com/sporto/assets-webpack-plugin#options
    new AssetsPlugin({
      path: path.resolve(__dirname, 'build'),
      filename: 'assets.json',
      prettyPrint: true,
    }),

    // Webpack Bundle Analyzer
    // https://github.com/th0r/webpack-bundle-analyzer
    ...isAnalyze ? [new BundleAnalyzerPlugin()] : [],
  ],

  optimization: {
    splitChunks: {
      chunks: 'all',
      name: false,
      cacheGroups,
    },
  },

  bail: !isDebug,

  cache: isDebug,
};