const ExtractText = require('extract-text-webpack-plugin');
const path = require('path');

const devMode = process.env.NODE_ENV !== 'production';

const editorStyles = new ExtractText({
    filename: './blocks.editor.build.css',
});

const frontendStyles = new ExtractText({
    filename: './style-admin_dashboard.css',
});

const plugins = [editorStyles, frontendStyles];

const scssConfig = {
    use: [
        {
            loader: 'css-loader',
        },
        {
            loader: 'sass-loader',
            options: {
                prependData: '@import "./src/common.scss";\n',
            },
        },
    ],
};

module.exports = {
    context: __dirname,
    devtool: devMode ? 'inline-sourcemap' : false,
    mode: devMode ? 'development' : 'production',
    entry: {
        admin_dashboard: './index.js',
        plugin_installer: './admin-dashboard/assets/js/plugin-installer.js'
    },
    output: {
        path: __dirname + '/admin-dashboard/dist/',
        filename: '[name].build.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, 'build'),
                    path.resolve(__dirname, 'vendor'),
                ],
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-react'],
                        },
                    },
                ],
            },
            {
                test: /editor\.scss$/,
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, 'build'),
                    path.resolve(__dirname, 'vendor'),
                ],
                use: editorStyles.extract(scssConfig),
            },
            {
                test: /style\.scss$/,
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, 'build'),
                    path.resolve(__dirname, 'vendor'),
                ],
                use: frontendStyles.extract(scssConfig),
            },
            {
                test: /\.(png|svg|jpe?g|gif)$/,
                include: /images/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/',
                            publicPath: 'images/'
                        }
                    }
                ]
            },

        ],
    },
    externals: {
        'lodash': 'lodash'
    },
    plugins,
};