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 OptimizeJsPlugin = require('optimize-js-plugin')
  16 const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')
  17 const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin')
  18
  19 /**
  20  * Webpack Constants
  21  */
  22 const ENV = process.env.NODE_ENV = process.env.ENV = 'production'
  23 const HOST = process.env.HOST || 'localhost'
  24 const PORT = process.env.PORT || 8080
  25 const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
  26   host: HOST,
  27   port: PORT,
  28   ENV: ENV,
  29   HMR: false
  30 })
  31
  32 module.exports = function (env) {
  33   return webpackMerge(commonConfig({env: ENV}), {
  34     /**
  35     * Developer tool to enhance debugging
  36     *
  37     * See: http://webpack.github.io/docs/configuration.html#devtool
  38     * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
  39     */
  40     devtool: 'source-map',
  41
  42     /**
  43     * Options affecting the output of the compilation.
  44     *
  45     * See: http://webpack.github.io/docs/configuration.html#output
  46     */
  47     output: {
  48
  49       /**
  50       * The output directory as absolute path (required).
  51       *
  52       * See: http://webpack.github.io/docs/configuration.html#output-path
  53       */
  54       path: helpers.root('dist'),
  55
  56       /**
  57       * Specifies the name of each output file on disk.
  58       * IMPORTANT: You must not specify an absolute path here!
  59       *
  60       * See: http://webpack.github.io/docs/configuration.html#output-filename
  61       */
  62       filename: '[name].[chunkhash].bundle.js',
  63
  64       /**
  65       * The filename of the SourceMaps for the JavaScript files.
  66       * They are inside the output.path directory.
  67       *
  68       * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
  69       */
  70       sourceMapFilename: '[file].map',
  71
  72       /**
  73       * The filename of non-entry chunks as relative path
  74       * inside the output.path directory.
  75       *
  76       * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
  77       */
  78       chunkFilename: '[name].[chunkhash].chunk.js',
  79
  80       publicPath: '/client/'
  81     },
  82
  83     externals: {
  84       webtorrent: 'WebTorrent'
  85     },
  86
  87     /**
  88      * Add additional plugins to the compiler.
  89      *
  90      * See: http://webpack.github.io/docs/configuration.html#plugins
  91      */
  92     plugins: [
  93
  94       /**
  95        * Webpack plugin to optimize a JavaScript file for faster initial load
  96        * by wrapping eagerly-invoked functions.
  97        *
  98        * See: https://github.com/vigneshshanmugam/optimize-js-plugin
  99        */
 100
 101       new OptimizeJsPlugin({
 102         sourceMap: false
 103       }),
 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       new HashedModuleIdsPlugin(),
 190
 191       /**
 192       * Plugin: IgnorePlugin
 193       * Description: Don’t generate modules for requests matching the provided RegExp.
 194       *
 195       * See: http://webpack.github.io/docs/list-of-plugins.html#ignoreplugin
 196       */
 197
 198       // new IgnorePlugin(/angular2-hmr/),
 199
 200       /**
 201       * Plugin: CompressionPlugin
 202       * Description: Prepares compressed versions of assets to serve
 203       * them with Content-Encoding
 204       *
 205       * See: https://github.com/webpack/compression-webpack-plugin
 206       */
 207       //  install compression-webpack-plugin
 208       // new CompressionPlugin({
 209       //   regExp: /\.css$|\.html$|\.js$|\.map$/,
 210       //   threshold: 2 * 1024
 211       // })
 212
 213       /**
 214       * Plugin LoaderOptionsPlugin (experimental)
 215       *
 216       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
 217       */
 218       new LoaderOptionsPlugin({
 219         minimize: true,
 220         debug: false,
 221         options: {
 222
 223           /**
 224           * Static analysis linter for TypeScript advanced options configuration
 225           * Description: An extensible linter for the TypeScript language.
 226           *
 227           * See: https://github.com/wbuchwalter/tslint-loader
 228           */
 229           tslint: {
 230             emitErrors: true,
 231             failOnHint: true,
 232             resourcePath: 'src'
 233           },
 234
 235           /**
 236           * Html loader advanced options
 237           *
 238           * See: https://github.com/webpack/html-loader#advanced-options
 239           */
 240           // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
 241           htmlLoader: {
 242             minimize: true,
 243             removeAttributeQuotes: false,
 244             caseSensitive: true,
 245             customAttrSurround: [
 246               [/#/, /(?:)/],
 247               [/\*/, /(?:)/],
 248               [/\[?\(?/, /(?:)/]
 249             ],
 250             customAttrAssign: [/\)?]?=/]
 251           },
 252
 253           // FIXME: Remove
 254           // https://github.com/bholloway/resolve-url-loader/issues/36
 255           // https://github.com/jtangelder/sass-loader/issues/289
 256           context: __dirname,
 257           output: {
 258             path: helpers.root('dist')
 259           }
 260         }
 261       })
 262     ],
 263
 264     /*
 265     * Include polyfills or mocks for various node stuff
 266     * Description: Node configuration
 267     *
 268     * See: https://webpack.github.io/docs/configuration.html#node
 269     */
 270     node: {
 271       global: true,
 272       crypto: 'empty',
 273       process: false,
 274       module: false,
 275       clearImmediate: false,
 276       setImmediate: false
 277     }
 278
 279   })
 280 }