'use strict';

const path = require('path');
const _ = require('lodash');
const webpack = require('webpack');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const devInfo = require('./dev-info.js');
let baseConfig = require('./webpack.base.config.js');

baseConfig = baseConfig('dev');

_.mergeWith(baseConfig, {
    devtool: '#inline-source-map',
    output: {
        publicPath: devInfo.publicPath
    },
    module: {
        rules: [{
            enforce: 'pre',
            test: /(\.js|\.vue)$/,
            exclude: /node_modules/,
            loader: 'eslint-loader',
            options: {
                cache: true,
                configFile: './.eslintrc',
                formatter: require('eslint/lib/formatters/codeframe')
            }
        }]
    },
    devServer: {
        host: devInfo.host,
        port: devInfo.port,
        publicPath: devInfo.publicPath,
        contentBase: [path.join(__dirname, './bundle/'), path.join(__dirname, '../')],
        hot: true,
        inline: true,
        compress: true,
        stats: {
            colors: true,
            children: false,
            chunks: false,
            assetsSort: 'size',
        },
        headers: {
            'Access-Control-Allow-Origin': '*'
        }
    },
    plugins: [
        new StyleLintPlugin({
            files: ['public/scss/**/*.css', 'public/vue/**/*.vue'],
            syntax: 'scss'
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
}, function customizer(objValue, srcValue) {
    if (_.isArray(objValue)) {
        return objValue.concat(srcValue);
    }
});

delete baseConfig.extends;

module.exports = baseConfig;