const webpack = require('webpack');
const path = require('path');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var PostCompilePlugin = require('webpack-post-compile-plugin')
var TransformModulesPlugin = require('webpack-transform-modules-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const pkg = require('../package.json');
const isProd = process.env.NODE_ENV === 'production';
const distDir = path.join(__dirname, `../dist/${pkg.name}/bundle`);

const webpackConfig = {
  mode: isProd ? 'production' : 'development',
  output: {
    filename: 'static/js/[name].[chunkhash].js',
    path: `${distDir}`,
    chunkFilename: 'static/js/[name].[chunkhash].js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.runtime.esm.js'
    },
    modules: [
      path.join(__dirname, '../apps'),
      'node_modules'
    ]
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader',
          options: {
            extractCSS: isProd,
          }
        },
      },
      {
        resourceQuery: /blockType=client/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }, {
        test: /\.s?css$/,
        use: [
          isProd ? MiniCssExtractPlugin.loader : 'vue-style-loader',
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: isProd
            }
          }]
      }, {
        test: /\.styl(us)?$/,
        use: [
          isProd ? MiniCssExtractPlugin.loader : 'vue-style-loader',
          'css-loader',
          'postcss-loader',
          {
            loader: 'stylus-loader',
            options: {
              sourceMap: isProd,
              'resolve url': true
            }
          }]
      }, {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'static/img/[name].[hash:7].[ext]'
          }
        }
      }, {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'static/img/[name].[hash:7].[ext]'
          }
        }
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.HashedModuleIdsPlugin(),
    new FriendlyErrorsPlugin(),
    new PostCompilePlugin(),
    new TransformModulesPlugin()
  ]
};

if (isProd) {
  webpackConfig.plugins.push(
    new MiniCssExtractPlugin({
      filename: 'static/css/[name].[contenthash].css',
      allChunks: true
    })
  );
}

module.exports = webpackConfig;