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');

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

let plugins = [
    new webpack.optimize.SplitChunksPlugin({
        // name :'vendors',
        // filename: 'vendors.js'
        chunks: 'async',
        minSize: 30000,
        maxSize: 0,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        name: true,
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10
            },
            default: {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
        }
    }),
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './index.ejs',
        inject: 'body',
    })
]

let devServer = {
    contentBase: './dist',
    host: '0.0.0.0',
    port: 1024,
    hot: true,
    inline: true,
    // useLocalIp: true,
    disableHostCheck: true,
    historyApiFallback: true
}

module.exports = merge(base, {
    output: output,
    plugins: plugins,
    // devtool: 'eval-source-map',
    devServer: devServer,
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                'vue-style-loader',
                'css-loader'
            ]
        }]
    }
});