panjareh/config/webpack.dev.js

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

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

const appDev = merge(common, {
  // Set the mode to development or production
  mode: "development",
  target: ["web", "es5"],
  // Control how source maps are generated
  devtool: "inline-source-map",
  output: {
    path: paths.build,
    // publicPath: "/",
    publicPath: "http://localhost:8004/",
    filename: "[name].bundle.js",
  },
  // Spin up a server for quick development
  devServer: {
    historyApiFallback: true,
    compress: false,
    port: process.env.PORT || 8004,
    open: true,
  },
  module: {
    rules: [
      // Styles: Inject CSS into the head with source maps
      {
        test: /\.(scss|css)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: { sourceMap: true, importLoaders: 1 },
          },
        ],
      },
    ],
  },
  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"],
        // },
      },
    }),
    // Only update what has changed on hot reload
    new webpack.HotModuleReplacementPlugin(),
    new Dotenv({
      path: `./.env.development`,
    }),
  ],
});


const appModule = merge(common, {
  entry: [paths.src + "/components/remotePlayer.js"],

  output: {
    path: paths.modules,
    publicPath: "http://localhost:8004/",
    filename: "js/[name].[contenthash].js",
  },
  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: [

      // 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" },
    ],
  },
})

module.exports = (env, argv) => {

  return [appDev]
}