@logue/smfplayer/webpack.config.js

smfplayer.js is JavaScript based Standard Midi Player for WebMidiLink based synthesizer.

const webpack = require('webpack');
const fs = require('fs');
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

const pjson = require('./package.json');
const build = new Date().toISOString();

/**
 * Webpack Config
 * @param {any} env
 * @param {any} argv
 * @return {webpack.Configuration}
 */
module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';
  const banner = `${pjson.name} v${pjson.version} | ${pjson.author.name} / ${pjson.contributors[0].name} | license: ${pjson.license} | build: ${build}`;

  const plugins = [
    new webpack.BannerPlugin({
      banner: banner,
    }),
  ];

  if (isProduction) {
    fs.writeFileSync(
      path.resolve(path.join(__dirname, 'src/meta.js')),
      `// This file is auto-generated by the build system.
const Meta = {
  version: '${pjson.version}',
  date: '${build}',
};
export default Meta;`
    );
  }

  return {
    mode: env,
    target: ['web'],
    entry: {
      'smf.player': './src/player.js',
      'smf.parser': './src/smf.js',
    },
    output: {
      path: path.resolve(__dirname, 'bin'),
      filename: !isProduction ? '[name].js' : '[name].min.js',
      library: 'SMF',
      libraryTarget: 'umd',
      umdNamedDefine: true,
      globalObject: `(typeof self !== 'undefined' ? self : this)`,
    },
    optimization: {
      minimize: isProduction,
      minimizer: [
        new TerserPlugin({
          test: /\.js(\?.*)?$/i,
          extractComments: true,
          terserOptions: {
            ecma: 2020,
            compress: { drop_console: true },
            output: {
              comments: false,
              beautify: false,
            },
          },
        }),
      ],
      splitChunks: {
        minSize: 0,
      },
      concatenateModules: false,
    },
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        },
      ],
    },
    resolve: {
      modules: [`${__dirname}/src`, 'node_modules'],
      extensions: ['.js'],
    },
    plugins: plugins,
    devtool: !isProduction ? 'source-map' : false,
    devServer: {
      static: {
        directory: path.join(__dirname, 'docs'),
      },
      client: {
        overlay: true,
      },
      port: 8080,
    },
  };
};