const path = require('path');
const webpack = require('webpack');
// const HtmlWebpackPlugin = require('html-webpack-plugin');
// const CleanWebpackPlugin = require('clean-webpack-plugin');
// const CopyWebpackPlugin = require('copy-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader')
require('babel-loader');
require('ts-loader');
const resolve = relativePath => path.resolve(__dirname, '..', relativePath);

module.exports = {
  mode: 'development',
  entry: {
    'components': './resources/scripts/components/navbar.ts',


    // 'applications/story-time':
    //     './resources/scripts/applications/story-time/main.vue',
    'applications/home': './resources/scripts/applications/home/main.vue',
  },
  output: {
    filename: 'scripts/[name]/app.bundle.js',
    path: path.resolve(__dirname, 'public'),
  },
  module: {
    rules: [
      {
        // vue-loader config to load `.vue` files or single file components.
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles
            css: [
              'vue-style-loader', {
                loader: 'css-loader',
              }
            ],
            ts: [
              'ts-loader',
            ],
            js: [
              'babel-loader',
            ],
          },
          cacheBusting: true,
        },
      },
      {
        test: /\.tsx?$/,
        use: [
          {loader: 'babel-loader'}, {
            loader: 'ts-loader',
            options: {
              appendTsSuffixTo: [/\.ts\.vue$/],
              appendTsxSuffixTo: [/\.tsx\.vue$/]
            }
          }
        ],
        exclude: /node_modules/
      },
      {
        // This is required for other javascript you are gonna write besides
        // vue.
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'),
          resolve('node_modules/webpack-dev-server/client'),
        ],
      },
    ]
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new VueLoaderPlugin(),
    // Exchanges, adds, or removes modules while an application is running,
    // without a full reload.
    new webpack.HotModuleReplacementPlugin(),
  ],
  resolve: {
    /**
     * The compiler-included build of vue which allows to use vue templates
     * without pre-compiling them
     */
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
    extensions: ['*', '.vue', '.js', '.ts', '.json'],
  },
  // output: {
  //   filename: 'scripts/applications/[name]/[name].bundle.js',
  //   path: path.resolve(__dirname, 'public')
  // },
  watchOptions: {aggregateTimeout: 300, poll: 1000},
  // webpack outputs performance related stuff in the browser.
  performance: {
    hints: false,
  },
  node: {fs: 'empty'}
}