/**
 * Notice that we're not extracting CSS or generating a service-worker. This
 * may create a slightly inconsistent experience, but should allow for faster/
 * easier development.
 *
 * We do still need to generate the "index.html" and copy over files from
 * "public/" so our `webpack-dev-server` can _serve_ them for us :+1:
 */
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const webpackCommon = require('./../../../.webpack/webpack.common.js');
// Plugins
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Const
const SRC_DIR = path.join(__dirname, '../src');
const DIST_DIR = path.join(__dirname, '../dist');
const PUBLIC_DIR = path.join(__dirname, '../public');
const ASSET_PATH = process.env.ASSET_PATH || '/';
// Env Vars
const HTML_TEMPLATE = process.env.HTML_TEMPLATE || 'index.html';
const PUBLIC_URL = process.env.PUBLIC_URL || '';
const APP_CONFIG = process.env.APP_CONFIG || 'config/default.js';

module.exports = (env, argv) => {
  const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR });

  return merge(commonConfig, {
    // https://webpack.js.org/configuration/mode/#mode-development
    mode: 'development',
    output: {
      path: DIST_DIR, // push to common?
      publicPath: ASSET_PATH,
      // filename: '[name].bundle.js',
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      // Copy "Public" Folder to Dist
      new CopyWebpackPlugin([
        {
          from: PUBLIC_DIR,
          to: DIST_DIR,
          toType: 'dir',
          // Ignore our HtmlWebpackPlugin template file
          // Ignore our configuration files
          ignore: ['config/*', 'html-templates/*', '.DS_Store'],
        },
        // Copy over and rename our target app config file
        {
          from: `${PUBLIC_DIR}/${APP_CONFIG}`,
          to: `${DIST_DIR}/app-config.js`,
        },
      ]),
      // Generate "index.html" w/ correct includes/imports
      new HtmlWebpackPlugin({
        template: `${PUBLIC_DIR}/html-templates/${HTML_TEMPLATE}`,
        filename: 'index.html',
        templateParameters: {
          PUBLIC_URL: PUBLIC_URL,
        },
      }),
    ],
    // https://webpack.js.org/configuration/dev-server/
    devServer: {
      hot: true,
      open: true,
      port: 3000,
      historyApiFallback: {
        disableDotRule: true,
      },
    },
  });
};