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