const webpack = require('webpack');
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
const history = require('connect-history-api-fallback');
const convert = require('koa-connect');
const internalIp = require('internal-ip');

module.exports = {
    devtool: process.env.WEBPACK_SERVE ? 'source-map' : false,
    mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
    entry: {
        'Juick': [
            __dirname + '/src/index.js',
            __dirname + '/src/style/main.css'
        ]
    },
    output: {
        filename: process.env.WEBPACK_SERVE ? '[name].js' : '[name].[contenthash].bundle.js',
        chunkFilename: process.env.WEBPACK_SERVE ? '[name].js' : '[name].[contenthash].bundle.js',
        publicPath: '/',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader', options: {
                            plugins: () => [
                                require('autoprefixer')({
                                    browsers: 'last 4 versions, > 1%, ie >= 8'
                                })
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file-loader?hash=sha512&digest=hex&name=[hash].[ext]'
                ]
            }
        ]
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: Boolean(process.env.WEBPACK_SERVE)
            }),
            new OptimizeCSSAssetsPlugin({})
        ],
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /node_modules/,
                    chunks: 'initial',
                    name: 'vendor',
                    enforce: true
                },
            }
        }
    },
    plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new MiniCssExtractPlugin({
            filename: 'Juick.[contenthash].css',
            allChunks: true
        }),
        new HtmlWebPackPlugin({
            template: './src/views/index.html',
            filename: './index.html'
        }),
        new ErrorOverlayPlugin()
    ],
};

module.exports.serve = {
    content: [__dirname],
    host: internalIp.v4.sync(),
    add: (app, middleware, options) => {
        const historyOptions = {
            // ... see: https://github.com/bripkens/connect-history-api-fallback#options
        };

        app.use(convert(history(historyOptions)));
    }
};