const merge = require('webpack-merge').merge;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const ProgressBarWebpackPlugin = require('progress-bar-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const common = require('./webpack.config.js');

const resolve = (url) => path.resolve(__dirname, "..", url);

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    plugins: [
        new ESLintPlugin({
            overrideConfigFile: resolve(".eslintrc.js"),
            context: resolve("src"),
            extensions: ['ts', 'js'],
            fix: true,
        }),
        new ProgressBarWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html',
            title: 'luckysheet-io',
            scriptLoading: 'blocking',
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].[contenthash].css',
        }),
        new webpack.ProvidePlugin({
            process: 'process/browser'
        })
    ],
    output: {
        filename: 'js/[name].[contenthash].js',
        library: 'luckysheet-io',
        libraryTarget: 'umd',
    },
    devServer: {
        host: '127.0.0.1',
        port: 'auto',
        static: './',
        hot: true,
        bonjour: true,
        client: {
            progress: true,
            overlay: true,
        },
    },
});