const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const extractTextPlugin = require('extract-text-webpack-plugin');

const config= {
    entry: {
        main: ['./app.js'],
        vendor: ['babel-polyfill', 'react', 'react-dom', 'vue']
    },
    output: {
        filename: '[name].[hash:6].js',
        path: path.resolve(__dirname, './build')
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: ['babel-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.styl$/,
                use: extractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                modules: true,
                                sourceMap: true,
                                localIdentName: '[name]__[local]--[hash:base64:5]',
                                importLoaders: 1
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: true,
                                config: {
                                    path: 'postcss.config.js'
                                }
                            }
                        },
                        'stylus-loader'
                    ]
                })
            },
            {
                test: /\.css$/,
                use: extractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader']
                })
            },
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'vue-loader'
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: [' ', '.js', '.jsx', '.vue'],
        alias: {
            'vue': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './tpl.html',
            title: 'webpack devserver demo',
            inject: true
        }),
        new webpack.HotModuleReplacementPlugin(),
        new extractTextPlugin('[name].css'),
        new webpack.NamedModulesPlugin()
    ],
    devtool: '#eval-source-map',
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    chunks: 'initial',
                    minChunks: 2,
                    maxInitialRequests: 5,
                    minSize: 0,
                    name: 'vendor'
                }
            }
        },
        runtimeChunk: {
            name: 'manifest'
        }
    }
}

if(process.NODE_ENV === 'production') {
    config.plugins.push(
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./build/vendor-manifest.json')
        })
    )
}else {
    config.devServer = {
        contentBase: path.resolve(__dirname, 'build'),
            port: 8080,
            bonjour: true,
            historyApiFallback: true,
            index: 'index.html',
            hot: true,
            inline: true,
            overlay: true,
            compress: true
    }
}

module.exports = config