text: const HtmlWebPackPlugin = require('html-webpack-plugin')
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  
  const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
  const TerserPlugin = require('terser-webpack-plugin')
  
  const WorkboxPlugin = require('workbox-webpack-plugin')
  
  module.exports = {
      mode: 'production',
      entry: './src/client/index.js',
      output: {
          libraryTarget: 'var',
          library: 'Client'
      },
      optimization: {
          //  Add Optimization for JS and CSS
          minimizer: [new TerserPlugin({}), new OptimizeCSSAssetsPlugin({})],
      },
      module: {
          rules: [
              // Add babel Loader that match js files as development
              {
                  test: '/\.js$/',
                  exclude: /node_modules/,
                  loader: "babel-loader"
              },
              // Add Loaders for
              //    1. converting sass => css
              //    2. Turns css into commonjs
              //    3. Extract css into files
              /* HINT: structure
              {
                  test: REGEX_TO_MATCH_FILES ex. /\.js$/,
                  exclude: /node_modules/,
                  loader: '',
              }
              */
              {
                  test: /\.scss$/,
                  use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]
              }
          ]
      },
      plugins: [
          new HtmlWebPackPlugin({
              template: './src/client/views/index.html',
              filename: './index.html'
          }),
          new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
          // configure workbox-webpack-plugin
          new WorkboxPlugin.GenerateSW(),
          new MiniCssExtractPlugin({filename: '[name].css'})
      ]
  }
  