Merge pull request #429 from meiblorn/fb-webpack-configuraiton-cleanup

Webpack configuration cleanup
PatrickJS · Mar 17, 2016 · 50c5cde · 50c5cde
2 parents 0c5c132 + a69a7ac
commit 50c5cde
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 64 deletions.
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,36 +1,45 @@
-// @AngularClass
+/**
+ * @author: @AngularClass
+ */
 
 var webpack = require('webpack');
 var helpers = require('./helpers');
 
+/**
+ * Webpack Plugins
+ */
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
 
-var ENV = process.env.ENV = process.env.NODE_ENV = 'development';
-var HMR = helpers.hasProcessFlag('hot');
-
-var metadata = {
+/**
+ * Webpack Constants
+ */
+const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
+const HMR = helpers.hasProcessFlag('hot');
+const METADATA = {
   title: 'Angular2 Webpack Starter by @gdi2990 from @AngularClass',
   baseUrl: '/',
   host: 'localhost',
   port: 3000,
   ENV: ENV,
   HMR: HMR
 };
-/*
- * Config
- * with default values at webpack.default.conf
+
+/**
+ * Webpack configuration
  */
 module.exports = {
-  // static data for index.html
-  metadata: metadata,
+
+  // Static data for index.html
+  metadata: METADATA,
+
   devtool: 'cheap-module-eval-source-map',
   // cache: true,
   debug: true,
   // devtool: 'eval' // for faster builds use 'eval'
 
-  // our angular app
+  // Our Angular.js app
   entry: {
     'polyfills': './src/polyfills.ts',
     'vendor': './src/vendor.ts',
@@ -41,7 +50,7 @@ module.exports = {
     extensions: ['', '.ts', '.js']
   },
 
-  // Config for our build files
+  // Configuration for our build files
   output: {
     path: helpers.root('dist'),
     filename: '[name].bundle.js',
@@ -65,7 +74,7 @@ module.exports = {
       // Support for CSS as raw text
       { test: /\.css$/,   loader: 'raw-loader' },
 
-      // support for .html as raw text
+      // Support for .html as raw text
       { test: /\.html$/,  loader: 'raw-loader', exclude: [ helpers.root('src/index.html') ] }
 
     ]
@@ -75,28 +84,28 @@ module.exports = {
     new ForkCheckerPlugin(),
     new webpack.optimize.OccurenceOrderPlugin(true),
     new webpack.optimize.CommonsChunkPlugin({ name: ['main', 'vendor', 'polyfills'], minChunks: Infinity }),
-    // static assets
+    // Static assets
     new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]),
-    // generating html
+    // Generating HTML
     new HtmlWebpackPlugin({ template: 'src/index.html', chunksSortMode: 'none' }),
     // Environment helpers (when adding more properties make sure you include them in custom-typings.d.ts)
     new webpack.DefinePlugin({
-      'ENV': JSON.stringify(metadata.ENV),
+      'ENV': JSON.stringify(METADATA.ENV),
       'HMR': HMR
     })
   ],
 
   // Other module loader config
 
-  // our Webpack Development Server config
+  // Our Webpack Development Server config
   tslint: {
     emitErrors: false,
     failOnHint: false,
     resourcePath: 'src',
   },
   devServer: {
-    port: metadata.port,
-    host: metadata.host,
+    port: METADATA.port,
+    host: METADATA.host,
     historyApiFallback: true,
     watchOptions: {
       aggregateTimeout: 300,

diff --git a/webpack.prod.config.js b/webpack.prod.config.js
@@ -1,11 +1,13 @@
-// @AngularClass
-
-/*
- * Helper: root(), and rootDir() are defined at the bottom
+/**
+ * @author: @AngularClass
  */
-var helpers = require('./helpers');
-// Webpack Plugins
+
+var helpers = require('./helpers'); // Helper: root(), and rootDir() are defined at the bottom
 var webpack = require('webpack');
+
+/**
+ * Webpack Plugins
+ */
 var ProvidePlugin = require('webpack/lib/ProvidePlugin');
 var DefinePlugin = require('webpack/lib/DefinePlugin');
 var OccurenceOrderPlugin = require('webpack/lib/optimize/OccurenceOrderPlugin');
@@ -15,26 +17,30 @@ var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
 var CompressionPlugin = require('compression-webpack-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
-var WebpackMd5Hash    = require('webpack-md5-hash');
+var WebpackMd5Hash = require('webpack-md5-hash');
 var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
-var ENV = process.env.NODE_ENV = process.env.ENV = 'production';
-var HOST = process.env.HOST || 'localhost';
-var PORT = process.env.PORT || 8080;
 
-var metadata = {
+/**
+ * Webpack Constants
+ */
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+const HOST = process.env.HOST || 'localhost';
+const PORT = process.env.PORT || 8080;
+const METADATA = {
   title: 'Angular2 Webpack Starter by @gdi2990 from @AngularClass',
   baseUrl: '/',
   host: HOST,
   port: PORT,
   ENV: ENV
 };
 
-/*
- * Config
+/**
+ * Webpack Configuration
  */
 module.exports = {
-  // static data for index.html
-  metadata: metadata,
+
+  // Static data for index.html
+  metadata: METADATA,
 
   devtool: 'source-map',
   debug: false,
@@ -81,7 +87,7 @@ module.exports = {
         test: /\.ts$/,
         loader: 'awesome-typescript-loader',
         query: {
-          // remove TypeScript helpers to be injected below by DefinePlugin
+          // Remove TypeScript helpers to be injected below by DefinePlugin
           'compilerOptions': {
             'removeComments': true
           }
@@ -103,7 +109,7 @@ module.exports = {
         loader: 'raw-loader',
       },
 
-      // support for .html as raw text
+      // Support for .html as raw text
       {
         test: /\.html$/,
         loader: 'raw-loader',
@@ -129,36 +135,37 @@ module.exports = {
       name: ['main', 'vendor', 'polyfills'],
       minChunks: Infinity
     }),
-    // static assets
+    // Static assets
     new CopyWebpackPlugin([
       {
         from: 'src/assets',
         to: 'assets'
       }
     ]),
-    // generating html
-    new HtmlWebpackPlugin({ template: 'src/index.html', chunksSortMode: 'none' }),
+    // Generating HTML
+    new HtmlWebpackPlugin({template: 'src/index.html', chunksSortMode: 'none'}),
     new DefinePlugin({
-      'ENV': JSON.stringify(metadata.ENV),
+      'ENV': JSON.stringify(METADATA.ENV),
       'HMR': false
     }),
     new UglifyJsPlugin({
-      // to debug prod builds uncomment //debug lines and comment //prod lines
+      // To debug prod builds uncomment //debug lines and comment //prod lines
 
-      // beautify: true,//debug
-      // mangle: false,//debug
-      // dead_code: false,//debug
-      // unused: false,//debug
-      // deadCode: false,//debug
+      // beautify: true, //debug
+      // mangle: false, //debug
+      // dead_code: false, //debug
+      // unused: false, //debug
+      // deadCode: false, //debug
       // compress : { screw_ie8 : true, keep_fnames: true, drop_debugger: false, dead_code: false, unused: false, }, // debug
-      // comments: true,//debug
+      // comments: true, //debug
 
       beautify: false,//prod
-      // disable mangling because of a bug in angular2 beta.1, beta.2 and beta.3
+
+      // Disable mangling because of a bug in angular2 beta.1, beta.2 and beta.3
       // TODO(mastertinner): enable mangling as soon as angular2 beta.4 is out
-      // mangle: { screw_ie8 : true },//prod
+      // mangle: { screw_ie8 : true }, //prod
       mangle: {
-        screw_ie8 : true,
+        screw_ie8: true,
         except: [
           'App',
           'About',
@@ -207,27 +214,27 @@ module.exports = {
           'ReplacePipe',
           'I18nPluralPipe',
           'I18nSelectPipe'
-        ] // needed for uglify RouterLink problem
-      },// prod
-      compress : { screw_ie8 : true },//prod
-      comments: false//prod
+        ] // Needed for uglify RouterLink problem
+      }, // prod
+      compress: {screw_ie8: true}, //prod
+      comments: false //prod
 
     }),
-   // include uglify in production
+    // Include uglify in production
     new CompressionPlugin({
       algorithm: helpers.gzipMaxLevel,
       regExp: /\.css$|\.html$|\.js$|\.map$/,
       threshold: 2 * 1024
     })
   ],
-  // Other module loader config
+  // Other module loader configuration
   tslint: {
     emitErrors: true,
     failOnHint: true,
     resourcePath: 'src',
   },
 
-  //Needed to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
+  // Needed to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
   htmlLoader: {
     minimize: true,
     removeAttributeQuotes: false,
@@ -236,7 +243,7 @@ module.exports = {
     customAttrAssign: [ /\)?\]?=/ ]
   },
 
-  // don't use devServer for production
+  // NOTE: Don't use devServer for production
   node: {
     global: 'window',
     process: false,

diff --git a/webpack.test.config.js b/webpack.test.config.js
@@ -1,13 +1,23 @@
-// @AngularClass
+/**
+ * @author: @AngularClass
+ */
 
 var helpers = require('./helpers');
-// Webpack Plugins
+
+/**
+ * Webpack Plugins
+ */
 var ProvidePlugin = require('webpack/lib/ProvidePlugin');
 var DefinePlugin  = require('webpack/lib/DefinePlugin');
-var ENV = process.env.ENV = process.env.NODE_ENV = 'test';
 
-/*
- * Config
+
+/**
+ * Webpack Constants
+ */
+const ENV = process.env.ENV = process.env.NODE_ENV = 'test';
+
+/**
+ * Webpack Configuration
  */
 module.exports = {
   devtool: 'source-map',
@@ -47,7 +57,7 @@ module.exports = {
       { test: /\.css$/,  loader: 'raw-loader', exclude: [ helpers.root('src/index.html') ] }
     ],
     postLoaders: [
-      // instrument only testing sources with Istanbul
+      // Instrument only testing sources with Istanbul
       {
         test: /\.(js|ts)$/,
         include: helpers.root('src'),