const path = require("path");
const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const WooCommerceDependencyExtractionWebpackPlugin = require("@woocommerce/dependency-extraction-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// Remove SASS rule from the default config so we can define our own.
const defaultRules = defaultConfig.module.rules.filter((rule) => {
  return String(rule.test) !== String(/\.(sc|sa)ss$/);
});

module.exports = {
  ...defaultConfig,
  devtool: "source-map",
  entry: {
    // index: path.resolve(process.cwd(), "src", "index.js"),
    "epaka-pl-map-without-blocks": path.resolve(
      process.cwd(),
      "src",
      "epaka-map-without-blocks.js",
    ),
    "epaka-pl-map": path.resolve(
      process.cwd(),
      "src",
      "epaka-pl-map-input-block",
      "epaka-map",
      "kartograf.js",
    ),
    "epaka-pl-map-input-block": path.resolve(
      process.cwd(),
      "src",
      "epaka-pl-map-input-block",
      "index.js",
    ),
    "epaka-pl-map-input-block-frontend": path.resolve(
      process.cwd(),
      "src",
      "epaka-pl-map-input-block",
      "frontend.js",
    ),
  },
  module: {
    ...defaultConfig.module,
    rules: [
      ...defaultRules,
      {
        test: /\.(sc|sa)ss$/,
        exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { importLoaders: 1 } },
          {
            loader: "sass-loader",
          },
        ],
      },
      {
        test: /\.(webm)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    ...defaultConfig.plugins.filter(
      (plugin) =>
        plugin.constructor.name !== "DependencyExtractionWebpackPlugin",
    ),
    new WooCommerceDependencyExtractionWebpackPlugin({ injectPolyfill: true }),
    new MiniCssExtractPlugin({
      filename: `[name].css`,
    }),
  ],
};
