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 BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  15 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
  16 const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin')
  17 const OptimizeJsPlugin = require('optimize-js-plugin')
  18 const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin')
  19 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  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 AOT = process.env.BUILD_AOT || helpers.hasNpmFlag('aot')
  27 const METADATA = {
  28   host: HOST,
  29   port: PORT,
  30   ENV: ENV,
  31   HMR: false,
  32   AOT: AOT,
  33   API_URL: ''
  34 }
  35
  36 module.exports = function (env) {
  37   return [
  38     videoEmbedConfig({ env: ENV }),
  39
  40     webpackMerge(commonConfig({ env: ENV }), {
  41       /**
  42       * Developer tool to enhance debugging
  43       *
  44       * See: http://webpack.github.io/docs/configuration.html#devtool
  45       * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
  46       */
  47       devtool: 'source-map',
  48
  49       /**
  50       * Options affecting the output of the compilation.
  51       *
  52       * See: http://webpack.github.io/docs/configuration.html#output
  53       */
  54       output: {
  55
  56         /**
  57         * The output directory as absolute path (required).
  58         *
  59         * See: http://webpack.github.io/docs/configuration.html#output-path
  60         */
  61         path: helpers.root('dist'),
  62
  63         /**
  64         * Specifies the name of each output file on disk.
  65         * IMPORTANT: You must not specify an absolute path here!
  66         *
  67         * See: http://webpack.github.io/docs/configuration.html#output-filename
  68         */
  69         filename: '[name].[chunkhash].bundle.js',
  70
  71         /**
  72         * The filename of the SourceMaps for the JavaScript files.
  73         * They are inside the output.path directory.
  74         *
  75         * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
  76         */
  77         sourceMapFilename: '[file].map',
  78
  79         /**
  80         * The filename of non-entry chunks as relative path
  81         * inside the output.path directory.
  82         *
  83         * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
  84         */
  85         chunkFilename: '[name].[chunkhash].chunk.js',
  86
  87         publicPath: '/client/'
  88       },
  89
  90       module: {
  91         rules: [
  92           {
  93             test: /junk\/index\.js$/,
  94             // exclude: /(node_modules|bower_components)/,
  95             use: {
  96               loader: 'babel-loader',
  97               options: {
  98                 presets: [ 'env' ]
  99               }
 100             }
 101           }
 102         ]
 103       },
 104
 105       /**
 106        * Add additional plugins to the compiler.
 107        *
 108        * See: http://webpack.github.io/docs/configuration.html#plugins
 109        */
 110       plugins: [
 111
 112         /**
 113          * Webpack plugin to optimize a JavaScript file for faster initial load
 114          * by wrapping eagerly-invoked functions.
 115          *
 116          * See: https://github.com/vigneshshanmugam/optimize-js-plugin
 117          */
 118
 119         new OptimizeJsPlugin({
 120           sourceMap: false
 121         }),
 122
 123         /**
 124          * Plugin: DedupePlugin
 125          * Description: Prevents the inclusion of duplicate code into your bundle
 126          * and instead applies a copy of the function at runtime.
 127          *
 128          * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 129          * See: https://github.com/webpack/docs/wiki/optimization#deduplication
 130          */
 131         // new DedupePlugin(),
 132
 133         /**
 134          * Plugin: DefinePlugin
 135          * Description: Define free variables.
 136          * Useful for having development builds with debug logging or adding global constants.
 137          *
 138          * Environment helpers
 139          *
 140          * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 141          */
 142         // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
 143         new DefinePlugin({
 144           'ENV': JSON.stringify(METADATA.ENV),
 145           'HMR': METADATA.HMR,
 146           'API_URL': JSON.stringify(METADATA.API_URL),
 147           'AOT': METADATA.AOT,
 148           'process.version': JSON.stringify(process.version),
 149           'process.env.ENV': JSON.stringify(METADATA.ENV),
 150           'process.env.NODE_ENV': JSON.stringify(METADATA.ENV),
 151           'process.env.HMR': METADATA.HMR
 152         }),
 153
 154         /**
 155         * Plugin: UglifyJsPlugin
 156         * Description: Minimize all JavaScript output of chunks.
 157         * Loaders are switched into minimizing mode.
 158         *
 159         * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
 160         */
 161         // NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
 162         new UglifyJsPlugin({
 163           parallel: true,
 164           uglifyOptions: {
 165             ie8: false,
 166             ecma: 6,
 167             warnings: true,
 168             mangle: true,
 169             output: {
 170               comments: false,
 171               beautify: false
 172             }
 173           },
 174           warnings: true
 175         }),
 176
 177         /**
 178          * Plugin: NormalModuleReplacementPlugin
 179          * Description: Replace resources that matches resourceRegExp with newResource
 180          *
 181          * See: http://webpack.github.io/docs/list-of-plugins.html#normalmodulereplacementplugin
 182          */
 183         new NormalModuleReplacementPlugin(
 184           /(angular2|@angularclass)((\\|\/)|-)hmr/,
 185           helpers.root('config/empty.js')
 186         ),
 187
 188         new NormalModuleReplacementPlugin(
 189           /zone\.js(\\|\/)dist(\\|\/)long-stack-trace-zone/,
 190           helpers.root('config/empty.js')
 191         ),
 192
 193         new HashedModuleIdsPlugin(),
 194
 195         /**
 196         * AoT
 197         */
 198         (AOT ? (
 199           new NormalModuleReplacementPlugin(
 200             /@angular(\\|\/)compiler/,
 201             helpers.root('config/empty.js')
 202           )
 203         ) : (new LoaderOptionsPlugin({}))),
 204
 205         /**
 206         * Plugin LoaderOptionsPlugin (experimental)
 207         *
 208         * See: https://gist.github.com/sokra/27b24881210b56bbaff7
 209         */
 210         new LoaderOptionsPlugin({
 211           minimize: true,
 212           debug: false,
 213           options: {
 214
 215             /**
 216             * Static analysis linter for TypeScript advanced options configuration
 217             * Description: An extensible linter for the TypeScript language.
 218             *
 219             * See: https://github.com/wbuchwalter/tslint-loader
 220             */
 221             tslint: {
 222               emitErrors: true,
 223               failOnHint: true,
 224               resourcePath: 'src'
 225             },
 226
 227             /**
 228             * Html loader advanced options
 229             *
 230             * See: https://github.com/webpack/html-loader#advanced-options
 231             */
 232             // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
 233             htmlLoader: {
 234               minimize: true,
 235               removeAttributeQuotes: false,
 236               caseSensitive: true,
 237               customAttrSurround: [
 238                 [/#/, /(?:)/],
 239                 [/\*/, /(?:)/],
 240                 [/\[?\(?/, /(?:)/]
 241               ],
 242               customAttrAssign: [/\)?]?=/]
 243             },
 244
 245             // FIXME: Remove
 246             // https://github.com/bholloway/resolve-url-loader/issues/36
 247             // https://github.com/jtangelder/sass-loader/issues/289
 248             context: __dirname,
 249             output: {
 250               path: helpers.root('dist')
 251             }
 252           }
 253         }),
 254
 255         new BundleAnalyzerPlugin({
 256           // Can be `server`, `static` or `disabled`.
 257           // In `server` mode analyzer will start HTTP server to show bundle report.
 258           // In `static` mode single HTML file with bundle report will be generated.
 259           // In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
 260           analyzerMode: 'static',
 261           // Path to bundle report file that will be generated in `static` mode.
 262           // Relative to bundles output directory.
 263           reportFilename: 'report.html',
 264           // Automatically open report in default browser
 265           openAnalyzer: false,
 266           // If `true`, Webpack Stats JSON file will be generated in bundles output directory
 267           generateStatsFile: true,
 268           // Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
 269           // Relative to bundles output directory.
 270           statsFilename: 'stats.json',
 271           // Options for `stats.toJson()` method.
 272           // For example you can exclude sources of your modules from stats file with `source: false` option.
 273           // See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
 274           statsOptions: null,
 275           // Log level. Can be 'info', 'warn', 'error' or 'silent'.
 276           logLevel: 'info'
 277         })
 278       ],
 279
 280       /*
 281       * Include polyfills or mocks for various node stuff
 282       * Description: Node configuration
 283       *
 284       * See: https://webpack.github.io/docs/configuration.html#node
 285       */
 286       node: {
 287         global: true,
 288         crypto: 'empty',
 289         fs: 'empty',
 290         process: true,
 291         module: false,
 292         clearImmediate: false,
 293         setImmediate: false
 294       }
 295
 296     })
 297   ]
 298 }