webpack.config.js

/* eslint-disable import/no-dynamic-require, global-require */
const { merge } = require('webpack-merge');
const fs = require('fs');
const path = require('path');
const MomentTimezoneInclude = require('./src/app/legacy/psammead/moment-timezone-include/src');
const { webpackDirAlias } = require('./dirAlias');

const appDirectory = fs.realpathSync(process.cwd());
const resolvePath = relativePath => path.resolve(appDirectory, relativePath);

const IS_PROD = process.env.NODE_ENV === 'production';
const START_DEV_SERVER = !IS_PROD;
const IS_PROD_PROFILE = process.env.IS_PROD_PROFILE === 'true';
const stats = IS_PROD
  ? {}
  : {
      // reduce verbosity of console output
      assets: false,
      children: false,
      chunks: false,
      hash: false,
      modules: false,
      publicPath: false,
      timings: false,
      version: false,
      warnings: true,
      colors: true, // color the console output in terminal
      entrypoints: false,
    };

const getBaseConfig = BUNDLE_TYPE => ({
  mode: IS_PROD ? 'production' : 'development',
  devtool: IS_PROD ? 'source-map' : 'eval-source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'], // resolves `import '../Foo'` to `../Foo/index.jsx`
    alias: {
      ...webpackDirAlias,
      /*
         This is needed to avoid multiple versions of isarray in multiple chunks.
         It tells it to use a single version, in a single location.
      */
      isarray: path.resolve(__dirname, 'node_modules/isarray'),
      ...(IS_PROD_PROFILE && {
        'react-dom$': 'react-dom/profiling',
        'scheduler/tracing': 'scheduler/tracing-profiling',
      }),
      'safe-buffer': path.resolve(__dirname, 'node_modules/safe-buffer'),
    },
  },
  devServer: {
    devMiddleware: {
      stats,
    },
  },
  stats,
  node: {
    // tell Webpack to provide a polyfill for this functionality.
    __filename: true,
    __dirname: true,
  },
  /**
   * Remove all default timezone data and allow importing it via import
   * '@bbc/moment-timezone-include/tz/Europe/London'. Restrict data
   * between 2010 (earliest articles using ATI, so likely earliest timestamps
   * we will find via most read) and 2025 which is soon enough to save space,
   * but long enough that we dont need to worry about forgetting it.
   */
  plugins: [new MomentTimezoneInclude({ startYear: 2010, endYear: 2025 })],
  watchOptions: {
    ignored: ['**/tz/**'],
  },
  module: {
    rules: [
      // tell Webpack to use the .babelrc to know how to transform JS/JSX to ES2015 JS
      {
        test: /\.(js|jsx|mjs)$/,
        include: [resolvePath('src')],
        use: [
          {
            loader: 'babel-loader',
            options: {
              envName: BUNDLE_TYPE,
              babelrc: true,
              cacheDirectory: true,
              presets: [],
            },
          },
        ],
      },
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
        ],
      },
      IS_PROD
        ? {
            test: /\.(js|jsx|mjs)$/,
            include: [resolvePath('node_modules/@bbc')],
            use: [
              {
                loader: 'babel-loader',
                options: {
                  presets: [],
                  plugins: [
                    [
                      'transform-react-remove-prop-types',
                      {
                        mode: 'remove',
                        removeImport: true,
                      },
                    ],
                  ],
                },
              },
            ],
          }
        : {},
    ],
  },
  // Bundle sizes are monitored by `./scripts/bundleSize.js`
  performance: {
    hints: false,
  },
});

// `shell` parameter populated via CLI, e.g. --env.platform=web
module.exports = (shell = {}) => {
  const CONFIG_FILE = shell.config;
  const CLIENT_LEGACY = ['client', 'legacy'];
  const CLIENT_MODERN = ['client', 'modern'];
  const SERVER = ['server'];

  const mergeIntoBaseConfig = ([app, BUNDLE_TYPE]) => {
    const baseConfig = getBaseConfig(BUNDLE_TYPE);
    const specialisedConfig = require(`./webpack.config.${app}.js`)({
      resolvePath,
      IS_PROD,
      START_DEV_SERVER,
      IS_PROD_PROFILE,
      BUNDLE_TYPE,
    });
    return merge(baseConfig, specialisedConfig);
  };

  // if we've passed env.config, just compile that one file
  if (CONFIG_FILE === 'client') {
    return [CLIENT_LEGACY, CLIENT_MODERN].map(mergeIntoBaseConfig);
  }
  if (CONFIG_FILE === 'server') {
    return mergeIntoBaseConfig(SERVER);
  }

  // else compile both (we've run `webpack` on its own)
  return [CLIENT_LEGACY, CLIENT_MODERN, SERVER].map(mergeIntoBaseConfig);
};