const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const devMode = process.env.NODE_ENV !== 'production';
const path = require('path');

const APP_DIR = path.resolve(__dirname, './src');
const BUILD_DIR = path.resolve(__dirname, './build');

/** env variables from config.js */
const envConfig = require('./config');
const userConfig = {}
const userFeatures = {}
for (const k in envConfig) {
  userConfig[k] = JSON.stringify(envConfig[k]);
}

for (const k in envConfig['features']) {
  userFeatures[k] = JSON.stringify(envConfig['features'][k])
}

const config = {
  entry: {
    index: `${APP_DIR}/index.jsx`,
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.scss$/,
        include: `${APP_DIR}`,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }, {
        test: /\.js(x)?$/,
        exclude: /node_modules/,
        include: `${APP_DIR}`,
        use: {
          loader: 'babel-loader'
        },
      }, {
        test: /\.(eot|svg|otf|ttf|woff|woff2)$/,
        use: {
          loader: 'file-loader',
        }
      },
    ],
  },
  node: {
    net: 'empty',
    tls: 'empty',
    dns: 'empty'
  },
  resolve: {
    extensions: ['*', '.js', ],
  },
  output: {
    path: BUILD_DIR,
    filename: 'js/[name].bundle.js',
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        ...userConfig,
        'NODE_ENV': JSON.stringify('production'),
        'features': userFeatures
      }
    }),
    new MiniCssExtractPlugin({
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
    new HtmlWebpackPlugin({
      template: './index.html',
    })
  ],
};

module.exports = config;