<repo_name>probablyabear/webpack-landing-page<file_sep>/webpack.production.config.js
/* eslint-disable import/no-extraneous-dependencies */
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const postcssPresetEnv = require("postcss-preset-env");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(process.cwd(), "dist"),
    filename: "bundle.[contenthash].js"
  },
  mode: "production",
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          ecma: 6,
          compress: true,
          output: {
            comments: false,
            beautify: false
          }
        }
      }),
      new OptimizeCSSAssetsPlugin({
        cssProcessorPluginOptions: {
          preset: ["default", { discardComments: { removeAll: true } }]
        }
      })
    ]
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        loaders: ["html-loader"]
      },
      {
        test: /\.(jpg|jpeg|png|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "img/",
              publicPath: "img/"
            }
          },
          {
            loader: "image-webpack-loader",
            options: {
              mozjpeg: {
                progressive: true,
                quality: 85
              },
              optipng: {
                enabled: true
              },
              pngquant: {
                quality: [0.65, 0.9],
                speed: 4
              },
              gifsicle: {
                interlaced: false
              }
            }
          }
        ]
      },
      {
        test: /\.(scss|css)$/,
        exclude: "/node_modules/",
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              sourceMap: false,
              importLoaders: 1
            }
          },
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: () => [
                postcssPresetEnv({
                  stage: 2,
                  browsers: "last 2 versions",
                  autoprefixer: { grid: true }
                })
              ]
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: false
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
      chunkFilename: "[id].css"
    }),
    new HtmlWebpackPlugin({
      title: "An awesome landing page",
      template: "./src/index.html",
      minify: {
        html5: true,
        collapseWhitespace: true,
        caseSensitive: true,
        removeComments: true,
        removeEmptyElements: false
      }
    })
  ]
};
<file_sep>/src/index.js
// JS
// eslint-disable-next-line no-unused-vars
import $ from "jquery";
// eslint-disable-next-line no-unused-vars
import popper from "popper.js";
import "bootstrap";

// Styles
import "./styles/index.scss";

// Navbar Scroll Colors
window.onscroll = () => {
  const nav = document.querySelector("#navbar");
  const navBrand = document.querySelector(".navbar-brand");
  const navHeight = nav.offsetHeight;
  const navItems = document.querySelectorAll("nav a.nav-link");
  if (navHeight <= window.pageYOffset) {
    nav.classList.add("navbar-scrolled");
    navItems.forEach(element => element.classList.add("nav-link-scrolled"));
    navBrand.classList.add("nav-brand-scrolled");
  } else {
    nav.classList.remove("navbar-scrolled");
    navItems.forEach(element => element.classList.remove("nav-link-scrolled"));
    navBrand.classList.remove("nav-brand-scrolled");
  }
};
