Explaining webpack's configuration with additional comments

[ajhsu]

const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const path = require("path");

/*

  This could be the simplest config example of the webpack,
  which contains four of main properties for the webpack:

  * Entry: Entry point of webpack bundler, could be single or multiple file(s).
  * Output: The destination of the bundled file(s).
  * Module Loaders: Transpilers for each module file(s), could be js, css or images .. etc.
  * Plug-ins: Extra task jobs could be done with plug-ins, such as clean-up, minification .. etc.

*/

const config = {
  entry: {
    main: "./path/to/my/entry/file.js"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "my-first-webpack.bundle.js"
  },
  module: {
    rules: [{ test: /\.txt$/, use: "raw-loader" }]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({ template: "./src/index.html" })
  ]
};

module.exports = config;