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