webpack.config.js

const path = require('path')
const Dotenv = require('dotenv-webpack')
const HTMLWebpack = require('html-webpack-plugin')
const TerserWebpack = require('terser-webpack-plugin')
const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

const isDevelopment = process.env.NODE_ENV === 'development'

const optimization = () => {
  const development = {
    splitChunks: {
      chunks: 'all'
    }
  }
  const production = {
    minimize: true,
    minimizer: [
      // new TerserWebpack({ cache: true })
      (compiler) => {
        const TerserPlugin = require('terser-webpack-plugin');
        new TerserPlugin({
          terserOptions: {
            compress: {},
          }
        }).apply(compiler);
      }
    ],
    splitChunks: {
      minSize: 10000,
      maxSize: 250000
    }
  }
  return isDevelopment ? development : production
}

const fileName = ext =>
  isDevelopment ? `[name].${ext}` : `[name].[hash].${ext}`

// const devTool = () => (isDevelopment ? 'source-map' : '')

module.exports = {
  mode: 'production',
  entry: './src/index',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: fileName('js'),
    publicPath: './'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
      src: path.resolve(__dirname, 'src/'),
      api: path.resolve(__dirname, 'src/api/'),
      store: path.resolve(__dirname, 'src/store/'),
      utils: path.resolve(__dirname, 'src/utils/'),
      assets: path.resolve(__dirname, 'src/assets/'),
      components: path.resolve(__dirname, 'src/components/')
    }
  },
  // devtool: devTool(),
  devtool: isDevelopment ? false : 'source-map',
  watchOptions: {
    aggregateTimeout: 1000,
    poll: 1000
  },
  performance: {
    hints: false
  },
  optimization: optimization(),
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: [{ loader: 'babel-loader' }]
      },
      {
        test: /\.(png|svg|jpg|gif|ico)$/,
        use: [{ loader: 'file-loader' }]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [{ loader: 'file-loader' }]
      }
    ]
  },
  devServer: {
    /*
    contentBase: path.join(__dirname, 'dist'),
    historyApiFallback: true,
    publicPath: '/'
    */
    static: {
      directory: path.join(__dirname, 'dist'),
      publicPath: '/serve-public-path-url',
      publicPath: '/'
    },
    historyApiFallback: true,
  },
  plugins: [
    new Dotenv({
      systemvars: true
    }),
    new HTMLWebpack({
      template: './src/index.html',
      filename: 'index.html',
      favicon: './src/assets/images/favicon.png',
      minify: { collapseWhitespace: !isDevelopment }
    }),
    new BundleAnalyzer({
      analyzerMode: 'disabled',
      generateStatsFile: false,
      statsOptions: { source: false }
    })
  ]
}