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({env: ENV}).metadata, {
  27   host: HOST,
  28   port: PORT,
  29   ENV: ENV,
  30   HMR: false
  31 })
  32
  33 module.exports = function (env) {
  34   return webpackMerge(commonConfig({env: ENV}), {
  35     /**
  36      * Switch loaders to debug mode.
  37      *
  38      * See: http://webpack.github.io/docs/configuration.html#debug
  39      */
  40     debug: false,
  41
  42     /**
  43      * Developer tool to enhance debugging
  44      *
  45      * See: http://webpack.github.io/docs/configuration.html#devtool
  46      * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
  47      */
  48     devtool: 'source-map',
  49
  50     /**
  51      * Options affecting the output of the compilation.
  52      *
  53      * See: http://webpack.github.io/docs/configuration.html#output
  54      */
  55     output: {
  56       /**
  57        * The output directory as absolute path (required).
  58        *
  59        * See: http://webpack.github.io/docs/configuration.html#output-path
  60        */
  61       path: helpers.root('dist'),
  62
  63       /**
  64        * Specifies the name of each output file on disk.
  65        * IMPORTANT: You must not specify an absolute path here!
  66        *
  67        * See: http://webpack.github.io/docs/configuration.html#output-filename
  68        */
  69       filename: '[name].[chunkhash].bundle.js',
  70
  71       /**
  72        * The filename of the SourceMaps for the JavaScript files.
  73        * They are inside the output.path directory.
  74        *
  75        * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
  76        */
  77       sourceMapFilename: '[name].[chunkhash].bundle.map',
  78
  79       /**
  80        * The filename of non-entry chunks as relative path
  81        * inside the output.path directory.
  82        *
  83        * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
  84        */
  85       chunkFilename: '[id].[chunkhash].chunk.js'
  86
  87     },
  88
  89     externals: {
  90       webtorrent: 'WebTorrent'
  91     },
  92
  93     /**
  94      * Add additional plugins to the compiler.
  95      *
  96      * See: http://webpack.github.io/docs/configuration.html#plugins
  97      */
  98     plugins: [
  99
 100       /**
 101        * Plugin: WebpackMd5Hash
 102        * Description: Plugin to replace a standard webpack chunkhash with md5.
 103        *
 104        * See: https://www.npmjs.com/package/webpack-md5-hash
 105        */
 106       new WebpackMd5Hash(),
 107
 108       /**
 109        * Plugin: DedupePlugin
 110        * Description: Prevents the inclusion of duplicate code into your bundle
 111        * and instead applies a copy of the function at runtime.
 112        *
 113        * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 114        * See: https://github.com/webpack/docs/wiki/optimization#deduplication
 115        */
 116       // new DedupePlugin(),
 117
 118       /**
 119        * Plugin: DefinePlugin
 120        * Description: Define free variables.
 121        * Useful for having development builds with debug logging or adding global constants.
 122        *
 123        * Environment helpers
 124        *
 125        * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 126        */
 127       // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
 128       new DefinePlugin({
 129         'ENV': JSON.stringify(METADATA.ENV),
 130         'HMR': METADATA.HMR,
 131         'process.env': {
 132           'ENV': JSON.stringify(METADATA.ENV),
 133           'NODE_ENV': JSON.stringify(METADATA.ENV),
 134           'HMR': METADATA.HMR
 135         }
 136       }),
 137
 138       /**
 139        * Plugin: UglifyJsPlugin
 140        * Description: Minimize all JavaScript output of chunks.
 141        * Loaders are switched into minimizing mode.
 142        *
 143        * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
 144        */
 145       // NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
 146       new UglifyJsPlugin({
 147         // beautify: true, //debug
 148         // mangle: false, //debug
 149         // dead_code: false, //debug
 150         // unused: false, //debug
 151         // deadCode: false, //debug
 152         // compress: {
 153         //   screw_ie8: true,
 154         //   keep_fnames: true,
 155         //   drop_debugger: false,
 156         //   dead_code: false,
 157         //   unused: false
 158         // }, // debug
 159         // comments: true, //debug
 160
 161         beautify: false, // prod
 162         mangle: { screw_ie8: true, keep_fnames: true }, // prod
 163         compress: { screw_ie8: true }, // prod
 164         comments: false // prod
 165       }),
 166
 167       new NormalModuleReplacementPlugin(
 168         /angular2-hmr/,
 169         helpers.root('config/modules/angular2-hmr-prod.js')
 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   })
 232 }