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