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