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.env': {
 127           'ENV': JSON.stringify(METADATA.ENV),
 128           'NODE_ENV': JSON.stringify(METADATA.ENV),
 129           'HMR': METADATA.HMR
 130         }
 131       }),
 132 /**
 133       * Plugin: UglifyJsPlugin
 134       * Description: Minimize all JavaScript output of chunks.
 135       * Loaders are switched into minimizing mode.
 136       *
 137       * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
 138       */
 139       // NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
 140       new UglifyJsPlugin({
 141         // beautify: true, //debug
 142         // mangle: false, //debug
 143         // dead_code: false, //debug
 144         // unused: false, //debug
 145         // deadCode: false, //debug
 146         // compress: {
 147         //   screw_ie8: true,
 148         //   keep_fnames: true,
 149         //   drop_debugger: false,
 150         //   dead_code: false,
 151         //   unused: false
 152         // }, // debug
 153         // comments: true, //debug
 154
 155         beautify: false, // prod
 156         output: {
 157           comments: false
 158         }, // prod
 159         mangle: {
 160           screw_ie8: true
 161         }, // prod
 162         compress: {
 163           screw_ie8: true,
 164           warnings: false,
 165           conditionals: true,
 166           unused: true,
 167           comparisons: true,
 168           sequences: true,
 169           dead_code: true,
 170           evaluate: true,
 171           if_return: true,
 172           join_vars: true,
 173           negate_iife: false // we need this for lazy v8
 174         }
 175       }),
 176
 177       new NormalModuleReplacementPlugin(
 178         /angular2-hmr/,
 179         helpers.root('config/empty.js')
 180       ),
 181
 182       new NormalModuleReplacementPlugin(
 183         /zone\.js(\\|\/)dist(\\|\/)long-stack-trace-zone/,
 184         helpers.root('config/empty.js')
 185       ),
 186
 187       new HashedModuleIdsPlugin(),
 188
 189       /**
 190       * Plugin: IgnorePlugin
 191       * Description: Don’t generate modules for requests matching the provided RegExp.
 192       *
 193       * See: http://webpack.github.io/docs/list-of-plugins.html#ignoreplugin
 194       */
 195
 196       // new IgnorePlugin(/angular2-hmr/),
 197
 198       /**
 199       * Plugin: CompressionPlugin
 200       * Description: Prepares compressed versions of assets to serve
 201       * them with Content-Encoding
 202       *
 203       * See: https://github.com/webpack/compression-webpack-plugin
 204       */
 205       //  install compression-webpack-plugin
 206       // new CompressionPlugin({
 207       //   regExp: /\.css$|\.html$|\.js$|\.map$/,
 208       //   threshold: 2 * 1024
 209       // })
 210
 211       /**
 212       * Plugin LoaderOptionsPlugin (experimental)
 213       *
 214       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
 215       */
 216       new LoaderOptionsPlugin({
 217         minimize: true,
 218         debug: false,
 219         options: {
 220
 221           /**
 222           * Static analysis linter for TypeScript advanced options configuration
 223           * Description: An extensible linter for the TypeScript language.
 224           *
 225           * See: https://github.com/wbuchwalter/tslint-loader
 226           */
 227           tslint: {
 228             emitErrors: true,
 229             failOnHint: true,
 230             resourcePath: 'src'
 231           },
 232
 233           /**
 234           * Html loader advanced options
 235           *
 236           * See: https://github.com/webpack/html-loader#advanced-options
 237           */
 238           // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
 239           htmlLoader: {
 240             minimize: true,
 241             removeAttributeQuotes: false,
 242             caseSensitive: true,
 243             customAttrSurround: [
 244               [/#/, /(?:)/],
 245               [/\*/, /(?:)/],
 246               [/\[?\(?/, /(?:)/]
 247             ],
 248             customAttrAssign: [/\)?]?=/]
 249           },
 250
 251           // FIXME: Remove
 252           // https://github.com/bholloway/resolve-url-loader/issues/36
 253           // https://github.com/jtangelder/sass-loader/issues/289
 254           context: __dirname,
 255           output: {
 256             path: helpers.root('dist')
 257           }
 258         }
 259       })
 260     ],
 261
 262     /*
 263     * Include polyfills or mocks for various node stuff
 264     * Description: Node configuration
 265     *
 266     * See: https://webpack.github.io/docs/configuration.html#node
 267     */
 268     node: {
 269       global: true,
 270       crypto: 'empty',
 271       fs: 'empty',
 272       process: false,
 273       module: false,
 274       clearImmediate: false,
 275       setImmediate: false
 276     }
 277
 278   })
 279 }