// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
const TerserPlugin = require('terser-webpack-plugin');
const postcssPresetEnv = require('postcss-preset-env');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const yaml = require('js-yaml');

const stylesHandler = MiniCssExtractPlugin.loader;

const webpackVersion = require('webpack/package.json').version.split('.').slice(0, 2).join('.');

const config = {
  mode: 'production',
  devtool: 'source-map',
  entry: {
    main: [ path.resolve(__dirname, "src", "index.js")
	  ]
  },
  output: {
    chunkFilename: '[chunkhash].js',
    filename: '[chunkhash].js',
    path: path.resolve(__dirname, 'dist', `wp-${webpackVersion}`),
    // publicPath: `/wp-${webpackVersion}/`,
    publicPath: `./`,
    hashFunction: 'shake256',
    hashDigestLength: 36
  },
  plugins: [
    new WebpackManifestPlugin({
      fileName: path.resolve(__dirname, 'dist', '.manifest.yaml'),
      publicPath: `/wp-${webpackVersion}/`,
      generate: (seed, files, entrypoints) => Object.keys(entrypoints).reduce((acc, fs) => ({...acc, [fs]: files.filter(file => entrypoints[fs].filter(basename => !(/\.map$/.test(basename))).some(basename => file.path.endsWith(basename))).filter(file => file.isInitial).map(file => file.path)}), {}),
      serialize: yaml.dump
    }),

    new MiniCssExtractPlugin({
      filename: '[chunkhash].css',
      chunkFilename: '[chunkhash].css',
    }),
  ],

  module: {
    rules: [
      {
	loader: 'babel-loader',

	options: {
	  plugins: ['syntax-dynamic-import'],

	  presets: [
	    [
	      '@babel/preset-env',
	      {
		modules: false,
		targets: "defaults",
		useBuiltIns: "usage",
		corejs: 3
	      }
	    ]
	  ]
	},
	test: /\.js$/i,
	exclude: /node_modules/,
      },
      {
	test: /\.css$/i,
	use: [ MiniCssExtractPlugin.loader,
	       { loader: 'css-loader', options: { sourceMap: true }},
	       { loader: 'postcss-loader', options: {
		   sourceMap: true,
		   postcssOptions:  {
		     plugins: [ 'postcss-preset-env' ]
		   }
	       }},
	       { loader: 'resolve-url-loader', options: { sourceMap: true }}
	     ]
      },
      {
	test: /\.s(c|a)ss$/i,
	use: [ MiniCssExtractPlugin.loader,
	       { loader: 'css-loader', options: { sourceMap: true }},
	       { loader: 'postcss-loader', options: {
		   sourceMap: true,
		   postcssOptions:  {
		     plugins: [ 'postcss-preset-env' ]
		   }
	       }},
	       { loader: 'resolve-url-loader', options: { sourceMap: true }},
	       { loader: 'sass-loader', options: { implementation: require('sass'), sourceMap: true }}
	     ]
      },
      {
	test: /\.(woff(2)?|ttf|eot|svg)(\?.*)?$/i,
	type: 'asset'
      }
    ]
  },

  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
	parallel: true,
	terserOptions: {
	  sourceMap: true
	}
      }),
      new CssMinimizerPlugin(),
    ],
    moduleIds: 'named',
    chunkIds: 'named',
    runtimeChunk: 'single',
    realContentHash: false,
    splitChunks: {
      chunks: 'all',
    },
  },
};

module.exports = config;