webpack

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exprots = {
    //development production none
    mode: 'development',

    //=============================================================================//
                                        Entry point
    //=============================================================================//
    entry: './path/to/my/entry/file.js',
    /*
    entry: {
        main: './path/to/my/entry/file.js'
    }

    entry: {
        app: './src/app.js',
        adminApp: './src/adminApp.js'
    }
    */

    //=============================================================================//
                                        Project Output
    //=============================================================================//
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
        //filename: '[name].bundle.js'
        //filename: '[name].[contentHash].bundle.js'
        //path: '/home/proj/cdn/assets/[hash]',
    },

    /*
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    }
    */

    //=============================================================================//
                                        Loaders
    //=============================================================================//
    module: {
        rules: [
            { test: /.ts$/, use: 'ts-loader' }
            {
                test: /.css$/,
                use: [
                  { loader: 'style-loader' },
                  {
                    loader: 'css-loader',
                    options: {
                      modules: true
                    }
                  },
                  { loader: 'sass-loader' }
                ]
            }
            //test property identifies which file or files should be transformed
            //use property indicates which loader should be used to do the transforming
        ]
        //Hey webpack compiler, when you come across a path that resolves to a '.txt' file
        //inside of a require()/import statement,
        //use the raw-loader to transform it before you add it to the bundle
        //Loaders are evaluated/executed from right to left (or from bottom to top)
    },

    //=============================================================================//
                                        Plugins
    //=============================================================================//
    //A webpack plugin is a JavaScript object that has an apply method. 
    //This apply method is called by the webpack compiler, 
    //giving access to the entire compilation lifecycle.
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
    
    /*
    watch: true,
    watchOptions: {
        ignored: ['files/**/*.js', 'node_modules/**']
    }
    */
};

https://webpack.js.org/configuration/

https://github.com/ruanyf/webpack-demos