react-map-gl/test/webpack.config.js

const {resolve} = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const ALIASES = require('../aliases');

const BROWSER_CONFIG = {
  mode: 'development',
  devServer: {
    stats: {
      warnings: false
    },
    quiet: true
  },

  // Generate a bundle in dist folder
  output: {
    path: resolve('./dist'),
    filename: '[name]-bundle.js'
  },

  resolve: {
    alias: Object.assign({}, ALIASES, {
      // Use mapbox prebuilt
      'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js'),
      webworkify: 'webworkify-webpack-dropin',

      // Aliases needed to defeat root scripts from getting duplicate dependencies
      // from sub module node_modules
      'math.gl': resolve('./node_modules/math.gl'),
      'probe.gl': resolve('./node_modules/probe.gl')
    })
  },

  devtool: '#inline-source-maps',

  module: {
    rules: [
      {
        // Unfortunately, webpack doesn't import library sourcemaps on its own...
        test: /\.js$/,
        use: ['source-map-loader'],
        enforce: 'pre'
      }
    ]
  },

  node: {
    fs: 'empty'
  },

  plugins: [
    new webpack.DefinePlugin({
      // Overwrite the default env var so that we can test access token handling
      'process.env.MapboxAccessToken': JSON.stringify(''),
      // Secret env var for testing only
      'process.env._MapboxAccessToken_': JSON.stringify(process.env.MapboxAccessToken) // eslint-disable-line
    }),
    new HtmlWebpackPlugin({title: 'luma.gl tests'})
  ]
};

const TEST_BROWSER_CONFIG = Object.assign({}, BROWSER_CONFIG, {
  // Bundle the tests for running in the browser
  entry: {
    'test-browser': resolve('./test/test-browser.js')
  }
});

const BENCH_BROWSER_CONFIG = Object.assign({}, BROWSER_CONFIG, {
  entry: {
    'test-browser': resolve('./test/bench/browser.js')
  }
});

// Get first key in an object
function getFirstKey(object) {
  for (const key in object) {
    return key;
  }
  return null;
}

function getDist(env) {
  if (env.es5) {
    return 'es5';
  }
  if (env.esm) {
    return 'esm';
  }
  return 'es6';
}

// Bundles a test app for size analysis
function getBundleConfig(env) {
  const app = getFirstKey(env);
  const dist = getDist(env);

  const config = Object.assign(TEST_BROWSER_CONFIG, {
    mode: 'production',
    // Replace the entry point for webpack-dev-server
    entry: {
      'test-browser': resolve(__dirname, './size', `${app}.js`)
    },
    output: {
      path: resolve('/tmp'),
      filename: 'bundle.js'
    },
    resolve: {
      mainFields: env.es6 ? ['esnext', 'browser', 'module', 'main'] : ['browser', 'module', 'main'],
      alias: Object.assign({}, ALIASES, {
        'react-map-gl': resolve(__dirname, `../dist/${dist}`)
      })
    },
    plugins: [
      // leave minification to app
      new webpack.DefinePlugin({NODE_ENV: JSON.stringify('production')})
    ]
  });

  delete config.devtool;
  return config;
}

// Bundles a test app for size analysis and starts the webpack bundle analyzer
function getBundleSizeAnalyzerConfig(env) {
  const config = getBundleConfig(env);
  config.plugins.push(new BundleAnalyzerPlugin());
  return config;
}

// Pick a webpack config based on --env.*** argument to webpack
function getConfig(env) {
  if (env.test || env.test_in_browser) {
    return TEST_BROWSER_CONFIG;
  }
  if (env.bench) {
    return BENCH_BROWSER_CONFIG;
  }

  if (env.bundle) {
    return getBundleConfig(env);
  }

  return getBundleSizeAnalyzerConfig(env);
}

module.exports = env => {
  const config = getConfig(env || {});
  // NOTE uncomment to display config
  // console.log('webpack env', JSON.stringify(env));
  // console.log('webpack config', JSON.stringify(config));
  return config;
};