// const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = (env, defineEnv, publicPath, port, appHtml) => [
  appHtml && new webpack.DefinePlugin({
    'process.env': {
      PUBLIC_PATH: `"${publicPath}"`,
      ...defineEnv[env],
    },
  }),
  appHtml && new HtmlWebpackPlugin(
    Object.assign(
      {},
      {
        template: appHtml,
        inject: true,
      },
      env === 'development'
        ? undefined
        : {
          minify: {
            collapseWhitespace: true,
            removeAttributeQuotes: true,
            removeComments: true,
          },
        }
    )
  ),
  new VueLoaderPlugin(),
  env === 'development' && new webpack.HotModuleReplacementPlugin(),
  env === 'development' && new CaseSensitivePathsPlugin(),
  env === 'development' && new FriendlyErrorsWebpackPlugin({
    compilationSuccessInfo: {
      messages: [
        `Your app is running here http://localhost:${port}`,
      ],
    },
  }),
  env !== 'development' && new webpack.HashedModuleIdsPlugin(),
  env !== 'development' && (
    appHtml
      ? new MiniCssExtractPlugin({
        filename: 'assets/styles/[name].[contenthash:8].css',
        chunkFilename: 'assets/styles/[name].[contenthash:8].chunk.css',
      })
      : new MiniCssExtractPlugin({
        filename: 'reverse.css',
        chunkFilename: 'reverse.chunk.css',
      })
  ),
].filter(Boolean)