@speechkit/speechkit-audio-player/webpack.config.js

A web player component that can play audio from https://speechkit.io

const webpack = require('webpack')
const path = require('path')
const autoPrefixer = require('autoprefixer')
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const version = require('./package.json').version

const libraryName = 'speechkit'
const urls = [
  'https://staging.spkt.io',
  'https://staging-2.spkt.io',
  'https://staging-app.speechkit.io',
  'https://spkt.io',
  'https://app.speechkit.io',
  'https://staging-2.spkt.io',
  'https://speechkit-staging-2.herokuapp.com',
]

const ORIGINS = {
  dev: ['http://spkt.local:3000', 'http://localhost:4100'],
  stage: urls,
  prod: urls,
}

const plugins = [
  new webpack.DefinePlugin({
    process: {
      env: {
        WEBPACK_ENV: JSON.stringify(process.env.WEBPACK_ENV),
        ORIGINS: JSON.stringify(ORIGINS[process.env.WEBPACK_ENV]),
      }
    }
  }),
  //use bundleanalyzer for local analysis only
  // new BundleAnalyzerPlugin(),
  new webpack.NamedModulesPlugin(),
  new LodashModuleReplacementPlugin(),

  // prints more readable module names in the browser console on HMR updates
  autoPrefixer,
]

const isDev = process.env.WEBPACK_ENV === 'dev'
const isStage = process.env.WEBPACK_ENV === 'stage'

let publicPath = isDev
  ? 'http://localhost:4100/'
  : `https://cdn.jsdelivr.net/npm/@speechkit/speechkit-audio-player@${version}/dist/`

if (isStage) {
  publicPath = `https://s3-eu-west-1.amazonaws.com/speechkit-js/${version}/`
}

if (!isDev) {
  plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      extractComments: true,
    }),
  )
}

const devtool = isDev ? 'source-map' : ''

const config = {
  entry: {
    player: __dirname + '/src/index.js',
    ghost: __dirname + '/src/ghost-integration/index.js',
    'iframe-helper': __dirname + '/src/iframe-helper/index.js',
  },
  devtool,
  output: {
    path: __dirname + '/dist',
    filename: libraryName + '-[name].js',
    library: [libraryName, '[name]'],
    chunkFilename: '[name].js',
    publicPath,
    umdNamedDefine: true,
  },
  devServer: {
    disableHostCheck: true,
    port: 4100,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['lodash'],
          },
        },
      },
      {
        test: /\.scss$/,
        use: [
          { loader: 'style-loader' }, // creates style nodes from JS strings
          {
            loader: 'css-loader', // translates CSS into CommonJS
            options: { minimize: true },
          },
          { loader: 'sass-loader' }, // compiles Sass to CSS
        ],
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader!css-loader!postcss-loader' },
        ],
      },
      {
        test: /\.svg$/,
        use: [
          { loader: 'raw-loader' },
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                { removeTitle: true },
                { convertColors: { shorthex: false } },
                { convertPathData: false },
                { removeViewBox: false },
              ],
            },
          },
        ],
      },
      {
        test: /\.html$/,
        use: [{ loader: 'html-loader' }],
      },
      {
        test: /\.mp3$|\.wav$/,
        use: [{ loader: 'url-loader' }],
      },
      {
        test: /\.(gif|png|jpg|ico|woff2|woff|ttf|eot)$/,
        use: [{ loader: 'file-loader' }],
      },
    ],
  },
  plugins,
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      'hls.js': path.resolve(__dirname, 'node_modules/hls.js/dist/hls.light.min.js'),
      'mobile-detect': path.resolve(__dirname, 'node_modules/mobile-detect/mobile-detect.min.js'),
      '@beyondwords/audio-player/iframe-helper': path.resolve(__dirname, 'node_modules/@beyondwords/audio-player/dist/module/iframe-helper.js'),
    },
  },
}

module.exports = config