const path = require('path');
const autoprefixer = require('autoprefixer');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (env = {}) => {
  const is_prod = !!env.production;

  const STYLE_LOADER = { loader: 'style-loader' };

  const CSS_LOADER = {
    loader: 'css-loader',
    options: {
      importLoaders: true,
    },
  };

  const POSTCSS_LOADER = {
    loader: 'postcss-loader',
    options: {
      plugins: [autoprefixer()],
    },
  };

  const SCSS_LOADER = { loader: 'sass-loader' };

  const MINI_CSS_LOADER = MiniCssExtractPlugin.loader;

  const BABEL_LOADER = {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env'],
      plugins: [
        '@babel/plugin-transform-runtime',
        '@babel/plugin-proposal-class-properties',
      ],
    },
  };

  const VUE_LOADER = {
    loader: 'vue-loader',
    options: {
      loaders: {
        css: [
          MINI_CSS_LOADER, //'vue-style-loader',
          CSS_LOADER,
          POSTCSS_LOADER,
        ],
        scss: [
          MINI_CSS_LOADER, //'vue-style-loader',
          CSS_LOADER,
          POSTCSS_LOADER,
          SCSS_LOADER,
        ],
      },
    },
  };

  return {
    mode: is_prod ? 'production' : 'development',
    entry: './assets/main.js',
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, './public/assets/'),
      publicPath: '/assets/',
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [BABEL_LOADER],
        },
        {
          test: /\.css$/,
          use: [MINI_CSS_LOADER, CSS_LOADER, POSTCSS_LOADER],
        },
        {
          test: /\.scss$/,
          use: [MINI_CSS_LOADER, CSS_LOADER, POSTCSS_LOADER, SCSS_LOADER],
        },
        {
          test: /\.vue$/,
          use: [VUE_LOADER],
        },
      ],
    },
    plugins: [
      new VueLoaderPlugin(),
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: '[name].css',
        // chunkFilename: "[id].css"
      }),
    ],
  };
};