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     module: {
  85       rules: [
  86         {
  87           test: /junk\/index\.js$/,
  88           // exclude: /(node_modules|bower_components)/,
  89           use: {
  90             loader: 'babel-loader',
  91             options: {
  92               presets: [ 'env' ]
  93             }
  94           }
  95         }
  96       ]
  97     },
  98
  99     /**
 100      * Add additional plugins to the compiler.
 101      *
 102      * See: http://webpack.github.io/docs/configuration.html#plugins
 103      */
 104     plugins: [
 105
 106       /**
 107        * Webpack plugin to optimize a JavaScript file for faster initial load
 108        * by wrapping eagerly-invoked functions.
 109        *
 110        * See: https://github.com/vigneshshanmugam/optimize-js-plugin
 111        */
 112
 113       new OptimizeJsPlugin({
 114         sourceMap: false
 115       }),
 116
 117       /**
 118        * Plugin: DedupePlugin
 119        * Description: Prevents the inclusion of duplicate code into your bundle
 120        * and instead applies a copy of the function at runtime.
 121        *
 122        * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 123        * See: https://github.com/webpack/docs/wiki/optimization#deduplication
 124        */
 125       // new DedupePlugin(),
 126
 127       /**
 128        * Plugin: DefinePlugin
 129        * Description: Define free variables.
 130        * Useful for having development builds with debug logging or adding global constants.
 131        *
 132        * Environment helpers
 133        *
 134        * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 135        */
 136       // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
 137       new DefinePlugin({
 138         'ENV': JSON.stringify(METADATA.ENV),
 139         'HMR': METADATA.HMR,
 140         'API_URL': JSON.stringify(METADATA.API_URL),
 141         'process.version': JSON.stringify(process.version),
 142         'process.env': {
 143           'ENV': JSON.stringify(METADATA.ENV),
 144           'NODE_ENV': JSON.stringify(METADATA.ENV),
 145           'HMR': METADATA.HMR
 146         }
 147       }),
 148
 149       /**
 150       * Plugin: UglifyJsPlugin
 151       * Description: Minimize all JavaScript output of chunks.
 152       * Loaders are switched into minimizing mode.
 153       *
 154       * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
 155       */
 156       // NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
 157       new UglifyJsPlugin({
 158         // beautify: true, //debug
 159         // mangle: false, //debug
 160         // dead_code: false, //debug
 161         // unused: false, //debug
 162         // deadCode: false, //debug
 163         // compress: {
 164         //   screw_ie8: true,
 165         //   keep_fnames: true,
 166         //   drop_debugger: false,
 167         //   dead_code: false,
 168         //   unused: false
 169         // }, // debug
 170         // comments: true, //debug
 171
 172         beautify: false, // prod
 173         output: {
 174           comments: false
 175         }, // prod
 176         mangle: {
 177           screw_ie8: true
 178         }, // prod
 179         compress: {
 180           screw_ie8: true,
 181           warnings: false,
 182           conditionals: true,
 183           unused: true,
 184           comparisons: true,
 185           sequences: true,
 186           dead_code: true,
 187           evaluate: true,
 188           if_return: true,
 189           join_vars: true,
 190           negate_iife: false // we need this for lazy v8
 191         }
 192       }),
 193
 194       new NormalModuleReplacementPlugin(
 195         /angular2-hmr/,
 196         helpers.root('config/empty.js')
 197       ),
 198
 199       new NormalModuleReplacementPlugin(
 200         /zone\.js(\\|\/)dist(\\|\/)long-stack-trace-zone/,
 201         helpers.root('config/empty.js')
 202       ),
 203
 204       new HashedModuleIdsPlugin(),
 205
 206       /**
 207       * Plugin: IgnorePlugin
 208       * Description: Don’t generate modules for requests matching the provided RegExp.
 209       *
 210       * See: http://webpack.github.io/docs/list-of-plugins.html#ignoreplugin
 211       */
 212
 213       // new IgnorePlugin(/angular2-hmr/),
 214
 215       /**
 216       * Plugin: CompressionPlugin
 217       * Description: Prepares compressed versions of assets to serve
 218       * them with Content-Encoding
 219       *
 220       * See: https://github.com/webpack/compression-webpack-plugin
 221       */
 222       //  install compression-webpack-plugin
 223       // new CompressionPlugin({
 224       //   regExp: /\.css$|\.html$|\.js$|\.map$/,
 225       //   threshold: 2 * 1024
 226       // })
 227
 228       /**
 229       * Plugin LoaderOptionsPlugin (experimental)
 230       *
 231       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
 232       */
 233       new LoaderOptionsPlugin({
 234         minimize: true,
 235         debug: false,
 236         options: {
 237
 238           /**
 239           * Static analysis linter for TypeScript advanced options configuration
 240           * Description: An extensible linter for the TypeScript language.
 241           *
 242           * See: https://github.com/wbuchwalter/tslint-loader
 243           */
 244           tslint: {
 245             emitErrors: true,
 246             failOnHint: true,
 247             resourcePath: 'src'
 248           },
 249
 250           /**
 251           * Html loader advanced options
 252           *
 253           * See: https://github.com/webpack/html-loader#advanced-options
 254           */
 255           // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
 256           htmlLoader: {
 257             minimize: true,
 258             removeAttributeQuotes: false,
 259             caseSensitive: true,
 260             customAttrSurround: [
 261               [/#/, /(?:)/],
 262               [/\*/, /(?:)/],
 263               [/\[?\(?/, /(?:)/]
 264             ],
 265             customAttrAssign: [/\)?]?=/]
 266           },
 267
 268           // FIXME: Remove
 269           // https://github.com/bholloway/resolve-url-loader/issues/36
 270           // https://github.com/jtangelder/sass-loader/issues/289
 271           context: __dirname,
 272           output: {
 273             path: helpers.root('dist')
 274           }
 275         }
 276       })
 277     ],
 278
 279     /*
 280     * Include polyfills or mocks for various node stuff
 281     * Description: Node configuration
 282     *
 283     * See: https://webpack.github.io/docs/configuration.html#node
 284     */
 285     node: {
 286       global: true,
 287       crypto: 'empty',
 288       fs: 'empty',
 289       process: true,
 290       module: false,
 291       clearImmediate: false,
 292       setImmediate: false
 293     }
 294
 295   })
 296 }