webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const ServiceWorkerWebpackPlugin = require("serviceworker-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  mode: "production",
  entry: { index: "./src/js/index.js", restaurant: "./src/js/restaurant.js" },
  output: { filename: "js/[name].js", path: path.resolve(__dirname, "dist") },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)|(sw\.js$)/,
        use: "babel-loader",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.jpg$/,
        loader: "responsive-loader",
        options: {
          min: 400,
          max: 800,
          steps: 2,
          quality: 50,
          name: "assets/images/[name]-[width].[ext]",
        },
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new FaviconsWebpackPlugin({
      logo: "./src/assets/favicon.png",
      outputPath: "/assets",
      favicons: {
        appName: "MWS Restaurant",
        appShortName: "MWS",
        start_url: "/?source=pwa",
        background: "#fcf5e4",
        theme_color: "#fcf5e4",
        icons: {
          android: true,
          appleIcon: true,
          appleStartup: false,
          coast: false,
          favicons: true,
          firefox: false,
          windows: false,
          yandex: false,
        },
      },
    }),
    new HtmlWebpackPlugin({
      template: "src/html/common.html",
      inject: "body",
      chunks: ["index"],
      minify: true,
      templateParameters: { title: "Restaurant Reviews", restaurantPage: false },
    }),
    new HtmlWebpackPlugin({
      filename: "restaurant.html",
      template: "src/html/common.html",
      inject: "body",
      chunks: ["restaurant"],
      minify: true,
      templateParameters: { title: "Restaurant Info", restaurantPage: true },
    }),
    new ServiceWorkerWebpackPlugin({
      entry: path.join(__dirname, "src/js/sw.js"),
      exclude: ["src/assets/images/*.*"],
      transformOptions: ({ assets }) => ({ assets: [...assets, "/?source=pwa"] }),
    }),
    new CompressionPlugin({ include: [/.html/, /.js$/, /.css/] }),
    new CopyPlugin({ patterns: [{ from: "src/js/firebase-messaging-sw.js" }] }),
  ],
  devtool: "source-map",
  devServer: { contentBase: "./dist" },
};