// Require things!
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// The configuration starts here!
module.exports = {
  // The entry point for webpack to start generating a dependency graph.
  entry: { index: './src/index.js' },
  
  // I have set the mode to development here. But in real world
  // this would probably be provided by CMD or a simple env
  // change to process.ENV
  mode: 'development',
  
  // I want the bundle to have the name [name](index.js) 
  // with its [hash]. Every time I make changes to 
  // index.js or one of its dependencies, it should create
  // a new version of it.
  output: {
    filename: '[name].[hash].js',
    path: path.join(__dirname, 'build')
  },
  
  // Rules to apply to modules
  module: {
    rules: [
      // Pass .vue files through the vue-loader
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      // Pass the JS files through the babel-loader
      // for all the latest ES goodies.
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: path.join(__dirname, 'node_modules')
      },
      // You wanna use sass don't you?
      // Works in reverse order. 
      // sass-loader transforms the sass to css
      // css-loader then returns all the css and invokes 
      //     any references to urls and imports as another
      //     module to be tested by webpack. Also makes it 
      //     js compatible.
      // style-loader actually puts the code that puts that 
      //     css into browsers.
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  // So, we wanna make sure that every time a new version of bundle
  // is generated, we have that new version in our index.html.
  // HTMLWebpackPlugin, very simply, dynamically puts links 
  // to the newly geneated bundle in index.html.
  plugins: [new HtmlWebpackPlugin({ template: './index.html' })]
};