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 ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin')
  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         new ModuleConcatenationPlugin(),
 112
 113         /**
 114          * Webpack plugin to optimize a JavaScript file for faster initial load
 115          * by wrapping eagerly-invoked functions.
 116          *
 117          * See: https://github.com/vigneshshanmugam/optimize-js-plugin
 118          */
 119
 120         new OptimizeJsPlugin({
 121           sourceMap: false
 122         }),
 123
 124         /**
 125          * Plugin: DedupePlugin
 126          * Description: Prevents the inclusion of duplicate code into your bundle
 127          * and instead applies a copy of the function at runtime.
 128          *
 129          * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 130          * See: https://github.com/webpack/docs/wiki/optimization#deduplication
 131          */
 132         // new DedupePlugin(),
 133
 134         /**
 135          * Plugin: DefinePlugin
 136          * Description: Define free variables.
 137          * Useful for having development builds with debug logging or adding global constants.
 138          *
 139          * Environment helpers
 140          *
 141          * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 142          */
 143         // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
 144         new DefinePlugin({
 145           'ENV': JSON.stringify(METADATA.ENV),
 146           'HMR': METADATA.HMR,
 147           'API_URL': JSON.stringify(METADATA.API_URL),
 148           'AOT': METADATA.AOT,
 149           'process.version': JSON.stringify(process.version),
 150           'process.env.ENV': JSON.stringify(METADATA.ENV),
 151           'process.env.NODE_ENV': JSON.stringify(METADATA.ENV),
 152           'process.env.HMR': METADATA.HMR
 153         }),
 154
 155         /**
 156         * Plugin: UglifyJsPlugin
 157         * Description: Minimize all JavaScript output of chunks.
 158         * Loaders are switched into minimizing mode.
 159         *
 160         * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
 161         */
 162         // NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
 163         new UglifyJsPlugin({
 164           parallel: true,
 165           uglifyOptions: {
 166             ie8: false,
 167             ecma: 6,
 168             warnings: true,
 169             mangle: true,
 170             output: {
 171               comments: false,
 172               beautify: false
 173             }
 174           },
 175           warnings: true
 176         }),
 177
 178         /**
 179          * Plugin: NormalModuleReplacementPlugin
 180          * Description: Replace resources that matches resourceRegExp with newResource
 181          *
 182          * See: http://webpack.github.io/docs/list-of-plugins.html#normalmodulereplacementplugin
 183          */
 184         new NormalModuleReplacementPlugin(
 185           /(angular2|@angularclass)((\\|\/)|-)hmr/,
 186           helpers.root('config/empty.js')
 187         ),
 188
 189         new NormalModuleReplacementPlugin(
 190           /zone\.js(\\|\/)dist(\\|\/)long-stack-trace-zone/,
 191           helpers.root('config/empty.js')
 192         ),
 193
 194         new HashedModuleIdsPlugin(),
 195
 196         /**
 197         * AoT
 198         */
 199         (AOT ? (
 200           new NormalModuleReplacementPlugin(
 201             /@angular(\\|\/)compiler/,
 202             helpers.root('config/empty.js')
 203           )
 204         ) : (new LoaderOptionsPlugin({}))),
 205
 206         /**
 207         * Plugin LoaderOptionsPlugin (experimental)
 208         *
 209         * See: https://gist.github.com/sokra/27b24881210b56bbaff7
 210         */
 211         new LoaderOptionsPlugin({
 212           minimize: true,
 213           debug: false,
 214           options: {
 215
 216             /**
 217             * Static analysis linter for TypeScript advanced options configuration
 218             * Description: An extensible linter for the TypeScript language.
 219             *
 220             * See: https://github.com/wbuchwalter/tslint-loader
 221             */
 222             tslint: {
 223               emitErrors: true,
 224               failOnHint: true,
 225               resourcePath: 'src'
 226             },
 227
 228             /**
 229             * Html loader advanced options
 230             *
 231             * See: https://github.com/webpack/html-loader#advanced-options
 232             */
 233             // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
 234             htmlLoader: {
 235               minimize: true,
 236               removeAttributeQuotes: false,
 237               caseSensitive: true,
 238               customAttrSurround: [
 239                 [/#/, /(?:)/],
 240                 [/\*/, /(?:)/],
 241                 [/\[?\(?/, /(?:)/]
 242               ],
 243               customAttrAssign: [/\)?]?=/]
 244             },
 245
 246             // FIXME: Remove
 247             // https://github.com/bholloway/resolve-url-loader/issues/36
 248             // https://github.com/jtangelder/sass-loader/issues/289
 249             context: __dirname,
 250             output: {
 251               path: helpers.root('dist')
 252             }
 253           }
 254         })
 255       ],
 256
 257       /*
 258       * Include polyfills or mocks for various node stuff
 259       * Description: Node configuration
 260       *
 261       * See: https://webpack.github.io/docs/configuration.html#node
 262       */
 263       node: {
 264         global: true,
 265         crypto: 'empty',
 266         fs: 'empty',
 267         process: true,
 268         module: false,
 269         clearImmediate: false,
 270         setImmediate: false
 271       }
 272
 273     })
 274   ]
 275 }