const path = require( "path" );
const HtmlWebpackPlugin = require( 'html-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const TerserJSPlugin = require( "terser-webpack-plugin" );
const OptimizeCSSAssetsPlugin = require( "optimize-css-assets-webpack-plugin" );
const HTMLInlineCSSWebpackPlugin = require( "html-inline-css-webpack-plugin" ).default;
const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );

const devMode = process.env.NODE_ENV === 'development';

module.exports = {

    entry: {
        index: path.join( __dirname, "src", "index.js" )
    },

    output: {
        path: path.join( __dirname, "dist" ),
        filename: "bundle.js"
    },

    devServer: {
        host: '0.0.0.0',
        port: 9000,
        writeToDisk: true
    },

    optimization: {
        minimizer: [new TerserJSPlugin( {} ), new OptimizeCSSAssetsPlugin( {} )],
    },

    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin( {
            filename: 'index.html',
            template: path.join( __dirname, "src", "index.html" ),
            inject: true
        } ),
        new MiniCssExtractPlugin( {
            filename: devMode ? '[name].css' : '[name].[hash].css',
            chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
        } ),
        new HTMLInlineCSSWebpackPlugin()
    ],

    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/,
                exclude: /(node_modules)/,
                use: ['file-loader'],
            },
            {
                test: /\.svg$/,
                exclude: /(node_modules)/,
                loader: 'svg-inline-loader'
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: { presets: ["@babel/preset-env"] }
                }
            },
            {
                test: /\.styl$/,
                exclude: /(node_modules)/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: { hmr: devMode },
                    },
                    //"style-loader",
                    "css-loader",   // translates CSS into CommonJS
                    "stylus-loader" // compiles Stylus to CSS
                ]
            }
        ]
    }
};

import "./css/index.styl";
import "./css/graphics.styl";
import "./js/polyfills.js"
import "./js/resumee_manager.js"