panjareh/config/webpack.prod.js

Panjareh using aparat and phoenix-video-player to play videos on desktops and tvs.

const paths = require("./paths");
// const path = require("path");
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
const Dotenv = require("dotenv-webpack");
const deps = require("../package.json").dependencies;

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = (env, argv) => {
  let mode = argv.mode || "production",
    config = {};

  config = {
    mode: mode,
    devtool: false,
    target: ["web", "es5"],
    plugins: [
      // Extracts CSS into separate files
      // Note: style-loader is for development, MiniCssExtractPlugin is for production
      new MiniCssExtractPlugin({
        filename: "styles/[name].[contenthash].css",
        chunkFilename: "styles/[id].css",
        ignoreOrder: false,
      }),
      new Dotenv({
        path: `./.env.production`,
      }),
    ],
    module: {
      rules: [
        {
          test: /\.(scss|css)$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: {
                importLoaders: 2,
                sourceMap: false,
              },
            },
          ],
        },
      ],
    },
    optimization: {
      minimize: true,
      minimizer: [
        // new OptimizeCssAssetsPlugin(),
        new TerserPlugin({
          terserOptions: {
            ecma: "5",
            compress: {
              arrows: false,
            },
            output: {
              comments: false,
              beautify: false,
            },
            mangle: true,
          },
        }),
      ],
      // Once your build outputs multiple chunks, this option will ensure they share the webpack runtime
      // instead of having their own. This also helps with long-term caching, since the chunks will only
      // change when actual code changes, not the webpack runtime.
      // runtimeChunk: {
      //   name: "chunk",
      // },
      splitChunks: {
        cacheGroups: {
          filmgardiVendors: {
            test: /[\\/]node_modules[\\/](@filmgardi)[\\/]/,
            type: "css/mini-extract",
            name: "filmgardi-vendors",
            idHint: "filmgardi-vendors",
            chunks: "all",
          },
        },
      },
    },
    performance: {
      hints: false,
      maxEntrypointSize: 512000,
      maxAssetSize: 512000,
    },
  };
  return [
    merge(common, {
      ...config,
      output: {
        path: paths.build,
        publicPath: "/",
        filename: "js/[name].[contenthash].bundle.js",
      },
    }),
    {
      ...config,
      entry: [paths.src + "/components/remotePlayer.js"],

      output: {
        path: paths.modules,
        publicPath: "http://localhost:8004/",
        filename: "js/[name].[contenthash].js",
      },
      plugins: [
        ...config.plugins,

        new ModuleFederationPlugin({
          name: "app_player",
          filename: "remoteEntry.js",
          remotes: {},
          exposes: {
            player: "./src/components/remotePlayer.js",
          },
          shared: {
            // ...deps,
            // react: {
            //   singleton: true,
            //   requiredVersion: deps.react,
            // },
            // "react-dom": {
            //   singleton: true,
            //   requiredVersion: deps["react-dom"],
            // },
          },
        }),
      ],
      module: {
        rules: [
          ...config.module.rules,

          // JavaScript: Use Babel to transpile JavaScript files
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: ["babel-loader"],
          },

          // Images: Copy image files to build folder
          { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: "asset/resource" },

          // Fonts and SVGs: Inline files
          { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: "asset/inline" },
        ],
      },
    },
  ];
};