webpack.prod

const fs = require("fs");
const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const ImageminPlugin = require('imagemin-webpack-plugin');


const generateHtmlPlugins = (templateDir) => {
  const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir));
  return templateFiles.map(item => {
    const parts = item.split(".");
    const name = parts[0];
    const extension = parts[1];
    return new HtmlWebpackPlugin({
      filename: `${name}.html`,
      template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`),
      inject: "body",
    });
  });
}

const productionConfig = {
  mode: "production",
  entry: [
    path.resolve(__dirname, "src/js/index.js"),
    path.resolve(__dirname, "src/styles/index.sass"),
  ],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/bundle.[contenthash].js",
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: "pug-loader"
      },
      {
        test: /\.js$/,
        include: path.resolve(__dirname, "src/js"),
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          }
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: { name: "img/[name].[ext]" }
          }
        ]
      },
      {
        test: /\.sass$/,
        include: path.resolve(__dirname, "src/styles"),
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: (loader) => [
                require("postcss-flexbugs-fixes"),
                require("autoprefixer")({
                  flexbox: "no-2009",
                  grid: "autoplace",
                }),
                require("postcss-font-magician")({
                  hosted: [
                    path.resolve(__dirname, "src/assets/fonts")
                  ],
                }),
                require("cssnano")({
                  preset: ["default", {
                    discardComments: {
                      removeAll: true,
                    },
                  }]
                }),
              ],
              sourceMap: false,
            },
          },
          {
            loader: "resolve-url-loader"
          },
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin("dist"),
    new CopyWebpackPlugin([
      {
        from: "./src/assets/fonts",
        to: "./fonts"
      },
      {
        from: "./src/assets/icons",
        to: "./img"
      },
      {
        from: "./src/assets/images",
        to: "./img"
      },
    ]),
    ...generateHtmlPlugins("src/html/pages"),
    new MiniCssExtractPlugin({
      filename: "css/styles.[contenthash].css",
      chunkFilename: "css/[id].[contenthash].css"
    }),
    new FaviconsWebpackPlugin({
      logo: path.resolve(__dirname, "src/assets/icons/favicon.png"),
      prefix: "icons/",
      emitStats: false,
      statsFilename: "favicon_stats.json",
      persistentCache: true,
      inject: true,
      background: "#fff",
      title: "Site template",
      icons: {
        android: true,
        appleIcon: true,
        appleStartup: true,
        coast: true,
        favicons: true,
        firefox: true,
        opengraph: true,
        twitter: true,
        yandex: true,
        windows: true
      }
    }),
    new ImageminPlugin({
      test: /\.(jpe?g|png|gif|svg)$/i,
      pngquant: {
        quality: '95-100'
      }
    })
  ]
}

module.exports = productionConfig;