const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Dotenv = require("dotenv-webpack");
const sveltePreprocess = require("svelte-preprocess");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

const deps = require("./package.json").dependencies;

module.exports = {
  // This says to webpack that we are in development mode and write the code in webpack file in different way
  mode: "development",
  //Our index file
  entry: "./src/index.js",
  //Where we put the production code
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "http://localhost:3001/",
  },
  module: {
    rules: [
      //Allows use of modern javascript
      {
        test: /\.js?$/,
        exclude: /node_modules/, //don't test node_modules folder
        use: {
          loader: "babel-loader",
        },
      },
      //Allows use of svelte
      {
        test: /\.svelte$/,
        use: {
          loader: "svelte-loader",
          options: {
            preprocess: sveltePreprocess({}),
          },
        },
      },
      //Allows use of CSS
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      //Allows use of images
      {
        test: /\.(jpg|jpeg|png|svg)$/,
        use: "file-loader",
      },
    ],
  },
  //this is what enables users to leave off the extension when importing
  resolve: {
    extensions: [".mjs", ".js", ".svelte"],
  },
  plugins: [
    //Allows to create an index.html in our build folder
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src/index.html"),
    }),
    //This gets all our css and put in a unique file
    new MiniCssExtractPlugin(),
    //take our environment variable in .env file
    //And it does a text replace in the resulting bundle for any instances of process.env.
    new Dotenv(),
    new ModuleFederationPlugin({
      name: "remoteSvelte",
      filename: "remoteEntry.js",
      remotes: {
        store: "store@http://localhost:7070/remoteEntry.js",
      },
      exposes: {
        "./Counter": "./src/index.js",
      },
      shared: {
        ...deps,
      },
    }),
  ],
  ////Config for webpack-dev-server module
  devServer: {
    historyApiFallback: true,
    hot: true,
    port: 3001,
  },
};