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 LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
  14 const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin')
  15 const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')
  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({env: ENV}).metadata, {
  25   host: HOST,
  26   port: PORT,
  27   ENV: ENV,
  28   HMR: false
  29 })
  30
  31 module.exports = function (env) {
  32   return webpackMerge(commonConfig({env: ENV}), {
  33     /**
  34     * Developer tool to enhance debugging
  35     *
  36     * See: http://webpack.github.io/docs/configuration.html#devtool
  37     * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
  38     */
  39     devtool: 'source-map',
  40
  41     /**
  42     * Options affecting the output of the compilation.
  43     *
  44     * See: http://webpack.github.io/docs/configuration.html#output
  45     */
  46     output: {
  47
  48       /**
  49       * The output directory as absolute path (required).
  50       *
  51       * See: http://webpack.github.io/docs/configuration.html#output-path
  52       */
  53       path: helpers.root('dist'),
  54
  55       /**
  56       * Specifies the name of each output file on disk.
  57       * IMPORTANT: You must not specify an absolute path here!
  58       *
  59       * See: http://webpack.github.io/docs/configuration.html#output-filename
  60       */
  61       filename: '[name].[chunkhash].bundle.js',
  62
  63       /**
  64       * The filename of the SourceMaps for the JavaScript files.
  65       * They are inside the output.path directory.
  66       *
  67       * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
  68       */
  69       sourceMapFilename: '[name].[chunkhash].bundle.map',
  70
  71       /**
  72       * The filename of non-entry chunks as relative path
  73       * inside the output.path directory.
  74       *
  75       * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
  76       */
  77       chunkFilename: '[id].[chunkhash].chunk.js',
  78
  79       publicPath: '/client/'
  80     },
  81
  82     externals: {
  83       webtorrent: 'WebTorrent'
  84     },
  85
  86     /**
  87      * Add additional plugins to the compiler.
  88      *
  89      * See: http://webpack.github.io/docs/configuration.html#plugins
  90      */
  91     plugins: [
  92
  93       /**
  94        * Plugin: WebpackMd5Hash
  95        * Description: Plugin to replace a standard webpack chunkhash with md5.
  96        *
  97        * See: https://www.npmjs.com/package/webpack-md5-hash
  98        */
  99       new WebpackMd5Hash(),
 100
 101       /**
 102        * Plugin: DedupePlugin
 103        * Description: Prevents the inclusion of duplicate code into your bundle
 104        * and instead applies a copy of the function at runtime.
 105        *
 106        * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 107        * See: https://github.com/webpack/docs/wiki/optimization#deduplication
 108        */
 109       // new DedupePlugin(),
 110
 111       /**
 112        * Plugin: DefinePlugin
 113        * Description: Define free variables.
 114        * Useful for having development builds with debug logging or adding global constants.
 115        *
 116        * Environment helpers
 117        *
 118        * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 119        */
 120       // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
 121       new DefinePlugin({
 122         'ENV': JSON.stringify(METADATA.ENV),
 123         'HMR': METADATA.HMR,
 124         'process.env': {
 125           'ENV': JSON.stringify(METADATA.ENV),
 126           'NODE_ENV': JSON.stringify(METADATA.ENV),
 127           'HMR': METADATA.HMR
 128         }
 129       }),
 130 /**
 131       * Plugin: UglifyJsPlugin
 132       * Description: Minimize all JavaScript output of chunks.
 133       * Loaders are switched into minimizing mode.
 134       *
 135       * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
 136       */
 137       // NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
 138       new UglifyJsPlugin({
 139         // beautify: true, //debug
 140         // mangle: false, //debug
 141         // dead_code: false, //debug
 142         // unused: false, //debug
 143         // deadCode: false, //debug
 144         // compress: {
 145         //   screw_ie8: true,
 146         //   keep_fnames: true,
 147         //   drop_debugger: false,
 148         //   dead_code: false,
 149         //   unused: false
 150         // }, // debug
 151         // comments: true, //debug
 152
 153         beautify: false, // prod
 154         output: {
 155           comments: false
 156         }, // prod
 157         mangle: {
 158           screw_ie8: true
 159         }, // prod
 160         compress: {
 161           screw_ie8: true,
 162           warnings: false,
 163           conditionals: true,
 164           unused: true,
 165           comparisons: true,
 166           sequences: true,
 167           dead_code: true,
 168           evaluate: true,
 169           if_return: true,
 170           join_vars: true,
 171           negate_iife: false // we need this for lazy v8
 172         }
 173       }),
 174
 175       new NormalModuleReplacementPlugin(
 176         /angular2-hmr/,
 177         helpers.root('config/empty.js')
 178       ),
 179
 180       new NormalModuleReplacementPlugin(
 181         /zone\.js(\\|\/)dist(\\|\/)long-stack-trace-zone/,
 182         helpers.root('config/empty.js')
 183       ),
 184
 185       // AoT
 186       // new NormalModuleReplacementPlugin(
 187       //   /@angular(\\|\/)upgrade/,
 188       //   helpers.root('config/empty.js')
 189       // ),
 190       // new NormalModuleReplacementPlugin(
 191       //   /@angular(\\|\/)compiler/,
 192       //   helpers.root('config/empty.js')
 193       // ),
 194       // new NormalModuleReplacementPlugin(
 195       //   /@angular(\\|\/)platform-browser-dynamic/,
 196       //   helpers.root('config/empty.js')
 197       // ),
 198       // new NormalModuleReplacementPlugin(
 199       //   /dom(\\|\/)debug(\\|\/)ng_probe/,
 200       //   helpers.root('config/empty.js')
 201       // ),
 202       // new NormalModuleReplacementPlugin(
 203       //   /dom(\\|\/)debug(\\|\/)by/,
 204       //   helpers.root('config/empty.js')
 205       // ),
 206       // new NormalModuleReplacementPlugin(
 207       //   /src(\\|\/)debug(\\|\/)debug_node/,
 208       //   helpers.root('config/empty.js')
 209       // ),
 210       // new NormalModuleReplacementPlugin(
 211       //   /src(\\|\/)debug(\\|\/)debug_renderer/,
 212       //   helpers.root('config/empty.js')
 213       // ),
 214
 215       /**
 216       * Plugin: IgnorePlugin
 217       * Description: Don’t generate modules for requests matching the provided RegExp.
 218       *
 219       * See: http://webpack.github.io/docs/list-of-plugins.html#ignoreplugin
 220       */
 221
 222       // new IgnorePlugin(/angular2-hmr/),
 223
 224       /**
 225       * Plugin: CompressionPlugin
 226       * Description: Prepares compressed versions of assets to serve
 227       * them with Content-Encoding
 228       *
 229       * See: https://github.com/webpack/compression-webpack-plugin
 230       */
 231       //  install compression-webpack-plugin
 232       // new CompressionPlugin({
 233       //   regExp: /\.css$|\.html$|\.js$|\.map$/,
 234       //   threshold: 2 * 1024
 235       // })
 236
 237       /**
 238       * Plugin LoaderOptionsPlugin (experimental)
 239       *
 240       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
 241       */
 242       new LoaderOptionsPlugin({
 243         debug: false,
 244         options: {
 245
 246           /**
 247           * Static analysis linter for TypeScript advanced options configuration
 248           * Description: An extensible linter for the TypeScript language.
 249           *
 250           * See: https://github.com/wbuchwalter/tslint-loader
 251           */
 252           tslint: {
 253             emitErrors: true,
 254             failOnHint: true,
 255             resourcePath: 'src'
 256           },
 257
 258           /**
 259           * Html loader advanced options
 260           *
 261           * See: https://github.com/webpack/html-loader#advanced-options
 262           */
 263           // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
 264           htmlLoader: {
 265             minimize: true,
 266             removeAttributeQuotes: false,
 267             caseSensitive: true,
 268             customAttrSurround: [
 269               [/#/, /(?:)/],
 270               [/\*/, /(?:)/],
 271               [/\[?\(?/, /(?:)/]
 272             ],
 273             customAttrAssign: [/\)?]?=/]
 274           },
 275
 276           // FIXME: Remove
 277           // https://github.com/bholloway/resolve-url-loader/issues/36
 278           // https://github.com/jtangelder/sass-loader/issues/289
 279           context: __dirname,
 280           output: {
 281             path: helpers.root('dist')
 282           }
 283         }
 284       })
 285     ],
 286
 287     /*
 288     * Include polyfills or mocks for various node stuff
 289     * Description: Node configuration
 290     *
 291     * See: https://webpack.github.io/docs/configuration.html#node
 292     */
 293     node: {
 294       global: true,
 295       crypto: 'empty',
 296       process: false,
 297       module: false,
 298       clearImmediate: false,
 299       setImmediate: false
 300     }
 301
 302   })
 303 }