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