webapck

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
require('@babel/polyfill');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  entry: ['@babel/polyfill', './src/index.js'],
  output: {
    path: path.resolve('dist'),
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js',
    publicPath: '/',
  },
  mode: process.env.NODE_ENV || 'development',
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    extensions: ['.js', '.jsx'],
  },
  devServer: {
    historyApiFallback: true,
    port: 7099,
  },
  module: {
    rules: [
      {
        // this is so that we can compile any React,
        // ES6 and above into normal ES5 syntax
        test: /\.(js|jsx)$/,
        // we do not want anything from node_modules to be compiled
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader', // creates style nodes from JS strings
          'css-loader', // translates CSS into CommonJS
          'sass-loader', // compiles Sass to CSS, using Node Sass by default
        ],
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        loaders: ['file-loader'],
      },
    ],
  },
  // optimization: {
  //   minimizer: [
  //     new TerserPlugin({
  //       cache: true,
  //       parallel: true,
  //       // extractComments: 'all',
  //       terserOptions: {
  //         output: {
  //           comments: false,
  //         },
  //       },
  //     }),
  //     new UglifyJsPlugin(),
  //     new OptimizeCSSAssetsPlugin({}),
  //   ],
  //   runtimeChunk: 'single',
  //   splitChunks: {
  //     chunks: 'all',
  //     maxInitialRequests: Infinity,
  //     minSize: 0,
  //     cacheGroups: {
  //       vendor: {
  //         test: /[\\/]node_modules[\\/]/,
  //         name(module) {
  //           const packageName = module.context.match(
  //             /[\\/]node_modules[\\/](.*?)([\\/]|$)/,
  //           )[1];
  //           return `n.${packageName.replace('@', '')}`;
  //         },
  //       },
  //     },
  //   },
  // },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
        },
      },
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'public', 'index.html'),
    }),
    new MiniCssExtractPlugin(),
    new PurgecssPlugin({
      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
    }),
    new Dotenv({
      path: './.env', // Path to .env file (this is the default)
    }),
    new webpack.DefinePlugin({
      'process.env.API_DOMAIN': JSON.stringify(process.env.API_DOMAIN),
      'process.env.API_HOSTNAME': JSON.stringify(process.env.API_HOSTNAME),
      'process.env.API_DOMAIN_DASHBOARD': JSON.stringify(
        process.env.API_DOMAIN_DASHBOARD,
      ),
      'process.env.API_DOMAIN_REGISTER': JSON.stringify(
        process.env.API_DOMAIN_REGISTER,
      ),
      'process.env.URL_CHAT': JSON.stringify(process.env.URL_CHAT),
    }),
    // new CleanWebpackPlugin(),
    // new DynamicCdnWebpackPlugin(),
    // new webpack.HashedModuleIdsPlugin(),
    // new CompressionPlugin({
    //   cache: true,
    // }),
  ],
};