// Require path.
const path = require('path')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
const TerserPlugin = require('terser-webpack-plugin')

// Configuration object.
const config = {
    // Create the entry points.
    // One for frontend and one for the admin area.
    entry: {
        ftm_table: './blocks/ftm-table/assets/build.js',
        ftm_table_cta: './blocks/table-cta/assets/build.js',
        ftm_informative_cta: './blocks/informative-cta/assets/build.js',
        ftm_list_icon: './blocks/list-icon/assets/build.js',
        ftm_information_element: './blocks/information-element/assets/build.js',
        ftm_post_meta: './blocks/ftm-post-meta/assets/build.js',
        ftm_pricing_table: './blocks/ftm-pricing-table/assets/build.js',
        ftm_table_cta_detailed: './blocks/table-cta-detailed/assets/build.js',
        ftm_comparison_tool: './blocks/ftm-comparison-tool/assets/build.js',
    },

    // Create the output files.
    // One for each of our entry points.
    output: {
        publicPath: '', //Set this to empty string, otherwise, it adds an "auto" folder in manifest
        // [name] allows for the entry object keys to be used as file names.
        filename: 'js/[name].[contenthash].js',
        // Specify the path to the JS files.
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'production',
    // Setup a loader to transpile down the latest and great JavaScript so older browsers
    // can understand it.
    module: {
        rules: [
            {
                // Look for any .js files.
                test: /\.js$/,
                // Exclude the node_modules folder.
                //exclude: /node_modules/,
                // Use babel loader to transpile the JS files.
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                        },
                    },
                ],
            },
            {
                // Apply rule for .sass, .scss or .css files
                test: /\.(sa|sc|c)ss$/,

                // Set loaders to transform files.
                // Loaders are applying from right to left(!)
                // The first loader will be applied after others
                use: [
                    {
                        // After all CSS loaders we use plugin to do his work.
                        // It gets all transformed CSS and extracts it into separate
                        // single bundled file
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        // This loader resolves url() and @imports inside CSS
                        loader: 'css-loader',
                        options: {
                            url: {
                                filter: (url, resourcePath) => {
                                    // resourcePath - path to css file
                                    // Don't handle images under root-relative /external_images/
                                    if (url.includes('/images/')) {
                                        return false
                                    }
                                    return true
                                },
                            },
                        },
                    },
                    /*{
                        // Then we apply postCSS fixes like autoprefixer and minifying
                        loader: "postcss-loader"
                    },*/
                    {
                        // First we transform SASS to standard CSS
                        loader: 'sass-loader',
                        options: {
                            implementation: require('sass'),
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images',
                            publicPath: '../images/',
                        },
                    },
                ],
            },
            {
                test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/',
                            publicPath: '../fonts/',
                        },
                    },
                ],
            },
        ],
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
            }),
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].[contenthash].css',
        }),
        new CleanWebpackPlugin(),
        new WebpackManifestPlugin({ writeToFileEmit: true }),
    ],
    watchOptions: {
        aggregateTimeout: 300,
        ignored: /node_modules/,
        poll: 1000,
    },
}

// Export the config object.
module.exports = config
