const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const CleanWebpackPlugin = require('clean-webpack-plugin');
const Precss = require('precss');
const Autoprefixer = require('autoprefixer');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

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

const config = {
    entry: {
        student: './assets/javascript/student.js',
        admin: './assets/javascript/admin.js',
        partner: './assets/javascript/partner.js',
        index: './assets/javascript/app.js',
    },
    output: {
        filename: '[name].js',
        chunkFilename: '[id].js',
        path: path.resolve(__dirname, 'assets/dist'),
        publicPath: '/cabinet/dist/',
    },

    plugins: [
        // extract styles to it's own file
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css',
        }),

        new VueLoaderPlugin(),

        // new LiveReloadPlugin(),

        new SpriteLoaderPlugin(),
    ],

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: require.resolve('jquery'),
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery',
                }, {
                    loader: 'expose-loader',
                    options: '$',
                }],
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    },
                },
            },

            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },

            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    }, {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 1,
                        },
                    }, {
                        loader: 'resolve-url-loader',
                    }, {
                        loader: 'postcss-loader', // Run post css actions
                        options: {
                            ident: 'postcss',
                            // post css plugins, can be exported to postcss.config.js
                            plugins(loader) {
                                return [
                                    require('postcss-import')({ root: loader.resourcePath }),
                                    require('postcss-preset-env')(),
                                    require('cssnano')(),
                                    require('autoprefixer')(),
                                ];
                            },
                            sourceMap: true,
                        },
                    },
                ],
            }, {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 1,
                        },
                    }, {
                        loader: 'resolve-url-loader',
                    }, {
                        loader: 'postcss-loader', // Run post css actions
                        options: {
                            ident: 'postcss',
                            // post css plugins, can be exported to postcss.config.js
                            plugins(loader) {
                                return [
                                    require('postcss-import')({ root: loader.resourcePath }),
                                    require('postcss-preset-env')(),
                                    require('cssnano')(),
                                    require('autoprefixer')(),
                                ];
                            },
                            sourceMap: true,
                        },
                    }, {
                        loader: 'sass-loader', // compiles Sass to CSS
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                loader: 'url-loader',
                exclude: path.join(__dirname, './assets/icons'),
                options: {
                    publicPath: './',
                    limit: 10000,
                },
            },
            {
                test: /\.svg$/,
                include: [
                    path.join(__dirname, './assets/icons'),
                ],
                loader: 'svg-sprite-loader',
                options: {
                    extract: false,
                    symbolId: 'icon-[name]',
                },
            },
        ],
    },

    resolve: {
        alias: {
            vue: devMode ? 'vue/dist/vue.js' : 'vue/dist/vue.min.js',
        },
        extensions: ['.tsx', '.ts', '.js'],
    },

    devtool: devMode ? 'cheap-module-eval-source-map' : '',

    externals: {
        jquery: 'jQuery',
        $: 'jQuery',
    },

    performance: {
        hints: devMode ? false : 'warning',
    },

    stats: { children: false },
};

devMode ? config.plugins.push(new webpack.SourceMapDevToolPlugin()) : '';

module.exports = config;