client/config/webpack.prod.js

   1 /**
   2  * @author: @AngularClass
   3  */
   4
   5 const helpers = require('./helpers')
   6 const webpackMerge = require('webpack-merge') // used to merge webpack configs
   7 const commonConfig = require('./webpack.common.js') // the settings that are common to prod and dev
   8
   9 /**
  10  * Webpack Plugins
  11  */
  12 const ProvidePlugin = require('webpack/lib/ProvidePlugin')
  13 const DefinePlugin = require('webpack/lib/DefinePlugin')
  14 const DedupePlugin = require('webpack/lib/optimize/DedupePlugin')
  15 const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')
  16 const CompressionPlugin = require('compression-webpack-plugin')
  17 const WebpackMd5Hash = require('webpack-md5-hash')
  18
  19 /**
  20  * Webpack Constants
  21  */
  22 const ENV = process.env.NODE_ENV = process.env.ENV = 'production'
  23 const HOST = process.env.HOST || 'localhost'
  24 const PORT = process.env.PORT || 8080
  25 const METADATA = webpackMerge(commonConfig.metadata, {
  26   host: HOST,
  27   port: PORT,
  28   ENV: ENV,
  29   HMR: false
  30 })
  31
  32 module.exports = webpackMerge(commonConfig, {
  33   /**
  34    * Switch loaders to debug mode.
  35    *
  36    * See: http://webpack.github.io/docs/configuration.html#debug
  37    */
  38   debug: false,
  39
  40   /**
  41    * Developer tool to enhance debugging
  42    *
  43    * See: http://webpack.github.io/docs/configuration.html#devtool
  44    * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
  45    */
  46   devtool: 'source-map',
  47
  48   /**
  49    * Options affecting the output of the compilation.
  50    *
  51    * See: http://webpack.github.io/docs/configuration.html#output
  52    */
  53   output: {
  54     /**
  55      * The output directory as absolute path (required).
  56      *
  57      * See: http://webpack.github.io/docs/configuration.html#output-path
  58      */
  59     path: helpers.root('dist'),
  60
  61     /**
  62      * Specifies the name of each output file on disk.
  63      * IMPORTANT: You must not specify an absolute path here!
  64      *
  65      * See: http://webpack.github.io/docs/configuration.html#output-filename
  66      */
  67     filename: '[name].[chunkhash].bundle.js',
  68
  69     /**
  70      * The filename of the SourceMaps for the JavaScript files.
  71      * They are inside the output.path directory.
  72      *
  73      * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
  74      */
  75     sourceMapFilename: '[name].[chunkhash].bundle.map',
  76
  77     /**
  78      * The filename of non-entry chunks as relative path
  79      * inside the output.path directory.
  80      *
  81      * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
  82      */
  83     chunkFilename: '[id].[chunkhash].chunk.js'
  84
  85   },
  86
  87   /**
  88    * Add additional plugins to the compiler.
  89    *
  90    * See: http://webpack.github.io/docs/configuration.html#plugins
  91    */
  92   plugins: [
  93
  94     /**
  95      * Plugin: WebpackMd5Hash
  96      * Description: Plugin to replace a standard webpack chunkhash with md5.
  97      *
  98      * See: https://www.npmjs.com/package/webpack-md5-hash
  99      */
 100     new WebpackMd5Hash(),
 101
 102     /**
 103      * Plugin: DedupePlugin
 104      * Description: Prevents the inclusion of duplicate code into your bundle
 105      * and instead applies a copy of the function at runtime.
 106      *
 107      * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 108      * See: https://github.com/webpack/docs/wiki/optimization#deduplication
 109      */
 110     new DedupePlugin(),
 111
 112     /**
 113      * Plugin: DefinePlugin
 114      * Description: Define free variables.
 115      * Useful for having development builds with debug logging or adding global constants.
 116      *
 117      * Environment helpers
 118      *
 119      * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 120      */
 121     // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
 122     new DefinePlugin({
 123       'ENV': JSON.stringify(METADATA.ENV),
 124       'HMR': METADATA.HMR,
 125       'process.env': {
 126         'ENV': JSON.stringify(METADATA.ENV),
 127         'NODE_ENV': JSON.stringify(METADATA.ENV),
 128         'HMR': METADATA.HMR
 129       }
 130     }),
 131
 132     /**
 133      * Plugin: UglifyJsPlugin
 134      * Description: Minimize all JavaScript output of chunks.
 135      * Loaders are switched into minimizing mode.
 136      *
 137      * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
 138      */
 139     // NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
 140     new UglifyJsPlugin({
 141       // beautify: true, //debug
 142       // mangle: false, //debug
 143       // dead_code: false, //debug
 144       // unused: false, //debug
 145       // deadCode: false, //debug
 146       // compress: {
 147       //   screw_ie8: true,
 148       //   keep_fnames: true,
 149       //   drop_debugger: false,
 150       //   dead_code: false,
 151       //   unused: false
 152       // }, // debug
 153       // comments: true, //debug
 154
 155       beautify: false, // prod
 156
 157       mangle: {
 158         screw_ie8: true,
 159         keep_fnames: true
 160       }, // prod
 161
 162       compress: {
 163         screw_ie8: true
 164       }, // prod
 165
 166       comments: false // prod
 167     }),
 168
 169     /**
 170      * Plugin: CompressionPlugin
 171      * Description: Prepares compressed versions of assets to serve
 172      * them with Content-Encoding
 173      *
 174      * See: https://github.com/webpack/compression-webpack-plugin
 175      */
 176     new CompressionPlugin({
 177       regExp: /\.css$|\.html$|\.js$|\.map$/,
 178       threshold: 2 * 1024
 179     })
 180
 181   ],
 182
 183   /**
 184    * Static analysis linter for TypeScript advanced options configuration
 185    * Description: An extensible linter for the TypeScript language.
 186    *
 187    * See: https://github.com/wbuchwalter/tslint-loader
 188    */
 189   tslint: {
 190     emitErrors: true,
 191     failOnHint: true,
 192     resourcePath: 'src'
 193   },
 194
 195   /**
 196    * Html loader advanced options
 197    *
 198    * See: https://github.com/webpack/html-loader#advanced-options
 199    */
 200   // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
 201   htmlLoader: {
 202     minimize: true,
 203     removeAttributeQuotes: false,
 204     caseSensitive: true,
 205     customAttrSurround: [
 206       [/#/, /(?:)/],
 207       [/\*/, /(?:)/],
 208       [/\[?\(?/, /(?:)/]
 209     ],
 210     customAttrAssign: [/\)?\]?=/]
 211   },
 212
 213   /*
 214    * Include polyfills or mocks for various node stuff
 215    * Description: Node configuration
 216    *
 217    * See: https://webpack.github.io/docs/configuration.html#node
 218    */
 219   node: {
 220     global: 'window',
 221     crypto: 'empty',
 222     process: false,
 223     module: false,
 224     clearImmediate: false,
 225     setImmediate: false
 226   }
 227
 228 })