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