Merge pull request #14 from roman01la/master

add comments for webpack config options

config/webpack.config.base.js

@@ -1,36 +1,45 @@
 const path = require('path')
 
 module.exports = {
-  name: 'redux-base-app',
+  name: 'redux-base-app', // project name
+
+  /* output config */
   output: {
-    path: path.join(__dirname, '../public/js'),
-    filename: 'bundle.[hash:6].js',
-    publicPath: '/js/',
-    hash: true
+    path: path.join(__dirname, '../public/js'), // output directory
+    filename: 'bundle.[hash:6].js', // output file name with hash pattern
+    publicPath: '/js/', // path to output file from browser's perspective
+    hash: true // enable hash
   },
   module: {
+    /* module loaders config */
     loaders: [
       {
-        test: /\.js$/,
-        loaders: [ 'babel' ],
-        exclude: /node_modules/
+        test: /\.js$/, // include files which filename is matching the pattern
+        loaders: [ 'babel' ], // exclude files which path is matching the pattern
+        exclude: /node_modules/ // list of module loaders
       },
-			{
-				test: /\.css$/, // Only .css files
-				loader: 'style!css' // Run both loaders
-			}
+      {
+        test: /\.css$/, // Only .css files
+        loader: 'style!css' // Run both loaders
+      }
     ]
   },
+
+  /* modules resolving config */
   resolve: {
-    modulesDirectories: ['node_modules'],
-    extensions: ['', '.js']
+    modulesDirectories: ['node_modules'], // look for modules in listed directories only
+    extensions: ['', '.js'] // resolve modules with listed extensions only
   },
+
+  /* module loaders resolving config */
   resolveLoader: {
-    modulesDirectories: ['node_modules'],
-    moduleTemplates: ['*-loader', '*'],
-    extensions: ['', '.js']
+    modulesDirectories: ['node_modules'], // look for loader modules in listed directories only
+    moduleTemplates: ['*-loader', '*'], // loader module name alternatives, 'babel' -> 'babel-loader'
+    extensions: ['', '.js'] // resolve loader modules with listed extensions only
   },
+
+  /* file system watching config */
   watchOptions: {
-    aggregateTimeout: 100
+    aggregateTimeout: 100 // do not re-build for 100ms after the last build, default is 300ms
   }
 }

config/webpack.config.dev.js

@@ -3,18 +3,32 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const baseConfig = require('./webpack.config.base')
 
 module.exports = Object.assign({
+
+  /* source-map type */
   devtool: 'source-map',
+
+  /* entry module config */
   entry: [
-    'webpack-hot-middleware/client',
-    './src/index'
+    'webpack-hot-middleware/client', // hot reaload path
+    './src/index' // entry module path
   ],
+
+  /* plugins config */
   plugins: [
+
+    /* define global variables which will be replaced by its values at build time */
     new webpack.DefinePlugin({
       __DEV__: true,
       'process.env': { NODE_ENV: '"development"' }
     }),
+
+    /* smart code reloading */
     new webpack.HotModuleReplacementPlugin(),
+
+    /* do not re-build when there's an error in the code */
     new webpack.NoErrorsPlugin(),
+
+    /* automate HTML file creation when using hashes in file names or any other dynamic output */
     new HtmlWebpackPlugin({
       template: 'templates/index.html',
       filename: 'index.html'

config/webpack.config.prod.js

@@ -3,21 +3,37 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const baseConfig = require('./webpack.config.base')
 
 module.exports = Object.assign({
+
+  /* source-map type */
   devtool: 'source-map',
+
+  /* entry module config */
   entry: [
-    './src/index'
+    './src/index' // entry module path
   ],
+
+  /* plugins config */
   plugins: [
+
+    /* define global variables which will be replaced by its values at build time */
     new webpack.DefinePlugin({
       __DEV__: false,
       'process.env': { NODE_ENV: '"production"' }
     }),
+
+    /* eliminate duplicated modules */
     new webpack.optimize.DedupePlugin(),
+
+    /* hoist most often used modules */
     new webpack.optimize.OccurenceOrderPlugin(),
+
+    /* minify and optimize */
     new webpack.optimize.UglifyJsPlugin({
       compress: true,
-      acorn: true
+      acorn: true // Acorn AST parser is little faster than a default one
     }),
+
+    /* automate HTML file creation when using hashes in file names or any other dynamic output */
     new HtmlWebpackPlugin({
       template: 'templates/index.html',
       filename: '../main.html'