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