const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );

const isDev = process.env.NODE_ENV === 'production';

module.exports = {
    plugins: [].concat(isDev ? [new DependencyExtractionWebpackPlugin()] : [new MiniCssExtractPlugin({
        filename: "css/[name].css",
    }), new DependencyExtractionWebpackPlugin()]),
    entry: {
        editor: './src/js/editor.js',
        front: './src/js/front.js',
        editor_styles: '/src/scss/editor.scss',
        front_styles: '/src/scss/front.scss'
    },
    resolve: {
        alias: {
          fonts: path.resolve(__dirname, 'dist/fonts')
        }
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: __dirname + '/dist/',
        filename: 'js/[name].js',
    },
    mode: isDev ? 'production' : 'development',
    module: {
    rules: [
        {
           test: /\.(js|jsx)$/,
           exclude: /node_modules/,
           use: ['babel-loader']
        },
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
              isDev ? "style-loader" : MiniCssExtractPlugin.loader,
              "css-loader",
              "sass-loader",
            ],
        },
        {
            test: /\.(woff|woff2)$/,
            type: 'asset/inline'
        }
      ]
  },
  resolve: {
    extensions: ['*', '.js']
  },
  devServer: {
    static: path.resolve(__dirname, './dist'),
  },
};