const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require('path');
const base = require('./webpack.base.config');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

let output = {
    path : path.resolve(__dirname, `../build`),
    publicPath : `build/`,
    filename : 'bundle/[name].bundle.js?[hash]',
    chunkFilename : 'chunk/[name].chunk.js?[hash]'
}

let plugins = [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify("production")
        }
    }),
    new HtmlWebpackPlugin({
        filename: '../index.html',
        template: './index.ejs',
        inject: 'body',
        minify: {
            html5: false,
            removeComments: true,
            removeEmptyAttributes: true,
            collapseWhitespace: true
        }
    }),
    new MiniCssExtractPlugin({
        filename: "css/[name].css?[hash]",
        chunkFilename: "css/[name].css?[hash]"
    })
]

module.exports = merge(base, {
    // devtool: 'source-map',
    output: output,
    plugins: plugins,
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                'vue-style-loader',
                MiniCssExtractPlugin.loader,
                'css-loader'
            ]
        }],
    },
    optimization: {
        runtimeChunk: {
            name: 'manifest'
        },
        splitChunks: {
            chunks: 'async',
            minSize: 30000,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            name: false,
            cacheGroups: {
                vendor: {
                    name: 'vendor',
                    chunks: 'initial',
                    priority: -10,
                    reuseExistingChunk: false,
                    test: /node_modules\/(.*)\.js/
                },
                // styles: {
                //     name: 'styles',
                //     test: /\.(scss|css)$/,
                //     chunks: 'all',
                //     minChunks: 1,
                //     reuseExistingChunk: true,
                //     enforce: true
                // }
            }
        }
    }
});