webpack.config.js

// helpers
const camelCaseToDash = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
const dashToCamelCase = (str) => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
const toUpperCase = (str) => `${str.charAt(0).toUpperCase()}${str.substr(1)}`;
const pascalCase = (str) => toUpperCase(dashToCamelCase(str));

// webpack requires
const webpack = require('webpack');

const {
  removeEmpty
} = require('webpack-config-utils');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

// common requires
const {
  resolve
} = require('path');

/**
 * this is equal to 'webpack --env=dev'
 *
 * @see https://webpack.js.org/configuration/configuration-types/#exporting-a-function-to-use-env
 */
const config = (env, argv) => {

  const mode = argv.mode;
  const isProd = mode === 'production';
  const ifProd = (whenProd, whenNot) => (isProd ? whenProd : whenNot);

  /**
   * Configuration for Universal Module Definition bundling.
   */
  return [{

    /**
     * These are the entry point of our library. We tell webpack to use
     * the name we assign later, when creating the bundle. We also use
     * the name to filter the second entry point for applying code
     * minification via UglifyJS
     */
    entry: {
      [`index${ifProd('.min', '')}`]: ['./src/index.ts'],
    },

    /**
     * The output defines how and where we want the bundles. The special
     * value `[name]` in `filename` tell Webpack to use the name we defined above.
     */
    output: {
      path: resolve(__dirname, 'umd'),
      // module format
      libraryTarget: 'umd',
      // library name to be used in browser (e.g. `window.ZXing`).
      library: 'ZXing',
      // will name the AMD module of the UMD build. Otherwise an anonymous define is used.
      umdNamedDefine: true
    },

    /**
     * Add resolve for `ts` files, otherwise Webpack would
     * only look for common JavaScript file extension (.js)
     */
    resolve: {
      extensions: ['.ts'],
    },

    /**
     * Optimizations Webpack shall apply.
     */
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    },

    /**
     * Activate source maps for the bundles in order to preserve the original
     * source when the user debugs the application
     */
    devtool: 'source-map',

    /**
     * Plugins to be used by webpack.
     */
    plugins: removeEmpty([

      /**
       * Enable scope hoisting.
       */
      new webpack.optimize.ModuleConcatenationPlugin(),

      /**
       * Apply minification only on the second bundle by
       * using a RegEx on the name, which must end with `.min.js`
       */
      ifProd(
        new UglifyJsPlugin({
          sourceMap: true,
          uglifyOptions: {
            compress: true,
            output: {
              comments: false
            }
          }
        })
      ),

      /**
       * Plugin for defining environment variables.
       */
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: mode
        },
      }),

    ]),

    /**
     * Defines module packing configuration, I guess
     */
    module: {
      rules: [{
        test: /\.ts?$/,
        include: /src/,
        exclude: /src\/test/,
        loader: 'awesome-typescript-loader',
      }],
    },
  }];
};

module.exports = config;