import path from 'path';
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const rootPath = path.resolve(__dirname, '..');

module.exports = {
    mode: 'development',
    entry: {
        app: ['webpack-hot-middleware/client', path.resolve(rootPath, 'src', 'index.js')]
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: 'build'
    },
    module: {
        rules: [{
            test: /\.(js|jsx?)$/,
            exclude: [
                path.resolve(rootPath, 'node_modules')
            ],
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/env", "@babel/react"]
                }
            }
        }, {
            test: /\.less$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "less-loader",
                options: {
                    paths: [
                        path.resolve(rootPath, "node_modules")
                    ]
                }
            }]
        }, {
            test: /\.css$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }]
        }]
    },
    plugins: [
        new webpack.DefinePlugin({
            "window.evn": JSON.stringify('development')
        }),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management',
            "filename": path.resolve(rootPath, 'build', 'index.html'),
            "inject": 'body',
            "template": path.resolve(rootPath, 'src', 'index-template.html')
        })
    ],
    resolve: {
        alias: {
            src: path.resolve(rootPath, 'src')
        }
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(rootPath, 'build'),
        publicPath: '/'
    }
};