webpack

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const HtmlWebpackCriticalPlugin = require('html-webpack-critical-plugin');

  const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    // disable: process.env.NODE_ENV === "development"
  });

module.exports = {
  mode: 'development',
  entry: {
    vendor: ["jquery", "lodash", "fullpage.js", "animejs", "smooth-scrollbar"],
    main: './app/index.js',
  },
  output: {
    filename: '[name].[hash].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [
            "css-loader",
            "sass-loader"
          ],
          fallback: "style-loader"
        })
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      },
      {
        test: /\.ejs$/,
        loader: 'ejs-loader',
      },
      {
        test: /\.html$/,
        use: [{
          loader: "html-loader",
          options: {
            minimize: true
          }
        }]
      }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'initial',
          test: 'vendor',
          name: 'vendor',
          enforce: true
        }
      }
    }
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),

    new HtmlWebPackPlugin({
      template: '!!ejs-compiled-loader!index.ejs',
      title: 'Shlomi Levi',
    }),

    extractSass,

    new HtmlWebpackInlineSVGPlugin({
      runPreEmit: true
    }),
    
    new HtmlWebpackCriticalPlugin({
      critical: {
        inline: true,
        base: 'dist/',
      }
    }),
  ]
};