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