add comments - webpack configs and dev server

server.js

@@ -1,4 +1,8 @@
 /* eslint-disable no-console */
+/**
+ * Setup and run the development server for Hot-Module-Replacement
+ * https://webpack.github.io/docs/hot-module-replacement-with-webpack.html
+ */
 
 import express from 'express';
 import webpack from 'webpack';

webpack.config.base.js

@@ -1,3 +1,7 @@
+/**
+ * Base webpack config used across other specific configs
+ */
+
 import path from 'path';
 import validate from 'webpack-validator';
 
@@ -12,18 +16,23 @@ export default validate({
       loader: 'json-loader'
     }]
   },
+
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js',
+
+    // https://github.com/webpack/webpack/issues/1114
     libraryTarget: 'commonjs2'
   },
+
+  // https://webpack.github.io/docs/configuration.html#resolve
   resolve: {
     extensions: ['', '.js', '.jsx', '.json'],
     packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
   },
-  plugins: [
 
-  ],
+  plugins: [],
+
   externals: [
     // put your node 3rd party libraries which can't be built with webpack here
     // (mysql, mongodb, and so on..)

webpack.config.development.js

@@ -1,4 +1,9 @@
 /* eslint-disable max-len */
+/**
+ * Build config for development process that uses Hot-Module-Replacement
+ * https://webpack.github.io/docs/hot-module-replacement-with-webpack.html
+ */
+
 import webpack from 'webpack';
 import validate from 'webpack-validator';
 import merge from 'webpack-merge';
@@ -42,12 +47,21 @@ export default validate(merge(baseConfig, {
   },
 
   plugins: [
+    ...baseConfig.plugins,
+
+    // https://webpack.github.io/docs/hot-module-replacement-with-webpack.html
     new webpack.HotModuleReplacementPlugin(),
+
+    // “If you are using the CLI, the webpack process will not exit with an error code by enabling this plugin.”
+    // https://github.com/webpack/docs/wiki/list-of-plugins#noerrorsplugin
     new webpack.NoErrorsPlugin(),
+
+    // NODE_ENV should be production so that modules do not perform certain development checks
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('development')
     })
   ],
 
+  // https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works
   target: 'electron-renderer'
 }));

webpack.config.electron.js

@@ -1,3 +1,7 @@
+/**
+ * Build config for electron 'Main Process' file
+ */
+
 import webpack from 'webpack';
 import validate from 'webpack-validator';
 import merge from 'webpack-merge';
@@ -8,30 +12,46 @@ export default validate(merge(baseConfig, {
 
   entry: ['babel-polyfill', './main.development'],
 
+  // 'main.js' in root
   output: {
     path: __dirname,
     filename: './main.js'
   },
 
   plugins: [
+    // Minify the output
     new webpack.optimize.UglifyJsPlugin({
       compressor: {
         warnings: false
       }
     }),
+
+    // Add source map support for stack traces in node
+    // https://github.com/evanw/node-source-map-support
     new webpack.BannerPlugin(
       'require("source-map-support").install();',
       { raw: true, entryOnly: false }
     ),
+
+    // NODE_ENV should be production so that modules do not perform certain development checks
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify('production')
       }
     })
   ],
 
+  /**
+   * Set targed to Electron speciffic node.js env.
+   * https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works
+   */
   target: 'electron-main',
 
+  /**
+   * Disables webpack processing of __dirname and __filename.
+   * If you run the bundle in node.js it falls back to these values of node.js.
+   * https://github.com/webpack/webpack/issues/2010
+   */
   node: {
     __dirname: false,
     __filename: false

webpack.config.production.js

@@ -1,3 +1,7 @@
+/**
+ * Build config for electron 'Renderer Process' file
+ */
+
 import webpack from 'webpack';
 import validate from 'webpack-validator';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
@@ -18,6 +22,9 @@ const config = validate(merge(baseConfig, {
 
   module: {
     loaders: [
+      ...baseConfig.module.loaders,
+
+      // Extract all .global.css to style.css as is
       {
         test: /\.global\.css$/,
         loader: ExtractTextPlugin.extract(
@@ -26,6 +33,7 @@ const config = validate(merge(baseConfig, {
         )
       },
 
+      // Pipe other styles through css modules and apend to style.css
       {
         test: /^((?!\.global).)*\.css$/,
         loader: ExtractTextPlugin.extract(
@@ -37,19 +45,30 @@ const config = validate(merge(baseConfig, {
   },
 
   plugins: [
+    ...baseConfig.plugins,
+
+    // https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
+    // https://github.com/webpack/webpack/issues/864
     new webpack.optimize.OccurrenceOrderPlugin(),
+
+    // NODE_ENV should be production so that modules do not perform certain development checks
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production')
     }),
+
+    // Minify without warning messages and IE8 support
     new webpack.optimize.UglifyJsPlugin({
       compressor: {
         screw_ie8: true,
         warnings: false
       }
     }),
+
+    // Set the ExtractTextPlugin output filename
     new ExtractTextPlugin('style.css', { allChunks: true })
   ],
 
+  // https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works
   target: 'electron-renderer'
 }));
 

webpack.config.test.js

@@ -1,13 +1,16 @@
+/** Used in .babelrc for 'test' environment */
+
 // for babel-plugin-webpack-loaders
 require('babel-register');
-const devConfigs = require('./webpack.config.development');
 const validate = require('webpack-validator');
+const devConfig = require('./webpack.config.development');
 
 module.exports = validate({
   output: {
     libraryTarget: 'commonjs2'
   },
   module: {
-    loaders: devConfigs.module.loaders.slice(1)  // remove babel-loader
+    // Use base + development loaders, but exclude 'babel-loader'
+    loaders: devConfig.module.loaders.slice(1)
   }
 });