text: const Dotenv = require("dotenv-webpack");
  const path = require("path");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const { CleanWebpackPlugin } = require("clean-webpack-plugin");
  
  module.exports = {
    entry: {
      main: "./src/index.js",
    },
    output: {
      path: path.join(__dirname, "../build"),
      filename: "[name].bundle.js",
    },
    mode: "development",
    devServer: {
      contentBase: path.join(__dirname, "../build"),
      compress: true,
      port: 3000,
      overlay: true,
    },
    devtool: "cheap-module-eval-source-map",
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader", // transpiling our JavaScript files using Babel and webpack
          },
        },
        {
          test: /\.(sa|sc|c)ss$/,
          use: [
            "style-loader", // creates style nodes from JS strings
            "css-loader", // translates CSS into CommonJS
            "postcss-loader", // Loader for webpack to process CSS with PostCSS
            "sass-loader", // compiles Sass to CSS, using Node Sass by default
          ],
        },
        {
          test: /\.(png|svg|jpe?g|gif|yml)$/,
          use: [
            {
              loader: "file-loader", // This will resolves import/require() on a file into a url and emits the file into the output directory.
              options: {
                name: "[name].[ext]",
                outputPath: "assets/",
              },
            },
          ],
        },
        {
          test: /\.yml$/,
          use: [
            {
              loader: "file-loader", // This will resolves import/require() on a file into a url and emits the file into the output directory.
              options: {
                name: "[name].[ext]",
              },
            },
          ],
        },
        {
          test: /\.html$/,
          use: {
            loader: "html-loader",
            options: {
              attrs: ["img:src", ":data-src"],
              minimize: true,
            },
          },
        },
      ],
    },
    plugins: [
      // CleanWebpackPlugin will do some clean up/remove folder before build
      // In this case, this plugin will remove 'dist' and 'build' folder before re-build again
      new CleanWebpackPlugin(),
      // The plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags
      new HtmlWebpackPlugin({
        template: "./src/index.html",
        filename: "index.html",
        favicon: "./src/assets/images/logo.png",
      }),
      new HtmlWebpackPlugin({
        template: "./src/404.html",
        filename: "404.html",
        favicon: "./src/assets/images/logo.png",
      }),
      new Dotenv({
        path: "./.env.prod", // Path to .env file (this is the default)
      }),
    ],
  };
  