const path = require('path');

/* Webpack's plugins */
const DefinePlugin = require('webpack/lib/DefinePlugin');
const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin');
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
const OccurrenceOrderPlugin = require('webpack/lib/optimize/OccurrenceOrderPlugin');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');

/* Third party plugins */
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const ManifestPlugin = require('webpack-manifest-plugin');

const ENVIRONMENT = require('./environment.config');

const { NODE_ENV, PORT } = ENVIRONMENT;
const DEVELOPMENT = NODE_ENV === 'development';
const SRC_PATH = path.resolve(__dirname, 'src');

module.exports = {
  mode: NODE_ENV,
  entry: { main: './src/app/index.tsx' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'assets/js/[name].[hash].js',
    chunkFilename: 'assets/js/[name].[chunkhash].js',
    publicPath: '/',
    jsonpFunction: 'n',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
    modules: ['node_modules'],
    alias: {
      '@': path.resolve(SRC_PATH),
    },
  },
  devtool: NODE_ENV !== 'production' ? 'cheap-module-source-map' : '',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'babel-loader',
        include: path.resolve(SRC_PATH, 'app'),
        exclude: [/[/\\\\]node_modules[/\\\\]/],
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'assets/images/[name].[hash:8].[ext]',
        },
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=application/font-woff',
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=application/font-woff',
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=application/octet-stream',
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: 'file-loader',
      },
    ],
  },
  plugins: [
    DEVELOPMENT && new ErrorOverlayPlugin(),
    DEVELOPMENT && new HotModuleReplacementPlugin(),
    new CleanWebpackPlugin('dist'),
    new CopyWebpackPlugin([
      {
        from: './src/assets',
        to: './assets',
        ignore: [/\.(js|jsx|html|json)$/, '.gitkeep'],
      },
    ]),
    new HashedModuleIdsPlugin(),
    new DefinePlugin({
      'process.env': Object.entries(ENVIRONMENT).reduce(
        (accum, [key, value]) => ({
          ...accum,
          [key]: JSON.stringify(value),
        }),
        {},
      ),
    }),
    new HtmlWebpackPlugin({
      title: 'Application',
      filename: 'index.html',
      template: path.resolve(SRC_PATH, 'index.html'),
      inject: true,
      meta: {
        description: 'React App',
      },
      minify: {
        // collapseWhitespace: true,
        processConditionalComments: true,
        keepClosingSlash: true,
        minifyCSS: true,
        minifyJS: true,
        minifyURLs: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true,
      },
      chunksSortMode: 'dependency',
    }),
    new ManifestPlugin(),
    new NamedModulesPlugin(),
    new OccurrenceOrderPlugin(true),
    new ForkTsCheckerWebpackPlugin({
      tslint: true,
    }),
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
    }),
    new ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ].filter(Boolean),
  devServer: {
    historyApiFallback: true,
    port: PORT,
    hot: true,
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'vendors',
    },
  },
};