client/config/webpack.dev.js

   1 const helpers = require('./helpers')
   2 const webpackMerge = require('webpack-merge') // used to merge webpack configs
   3 const commonConfig = require('./webpack.common.js') // the settings that are common to prod and dev
   4
   5 /**
   6  * Webpack Plugins
   7  */
   8 const DefinePlugin = require('webpack/lib/DefinePlugin')
   9
  10 /**
  11  * Webpack Constants
  12  */
  13 const ENV = process.env.ENV = process.env.NODE_ENV = 'development'
  14 const HMR = helpers.hasProcessFlag('hot')
  15 const METADATA = webpackMerge(commonConfig.metadata, {
  16   host: 'localhost',
  17   port: 3000,
  18   ENV: ENV,
  19   HMR: HMR
  20 })
  21
  22 /**
  23  * Webpack configuration
  24  *
  25  * See: http://webpack.github.io/docs/configuration.html#cli
  26  */
  27 module.exports = webpackMerge(commonConfig, {
  28   /**
  29    * Merged metadata from webpack.common.js for index.html
  30    *
  31    * See: (custom attribute)
  32    */
  33   metadata: METADATA,
  34
  35   /**
  36    * Switch loaders to debug mode.
  37    *
  38    * See: http://webpack.github.io/docs/configuration.html#debug
  39    */
  40   debug: true,
  41
  42   /**
  43    * Developer tool to enhance debugging
  44    *
  45    * See: http://webpack.github.io/docs/configuration.html#devtool
  46    * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
  47    */
  48   devtool: 'cheap-module-source-map',
  49
  50   /**
  51    * Options affecting the output of the compilation.
  52    *
  53    * See: http://webpack.github.io/docs/configuration.html#output
  54    */
  55   output: {
  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].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: '[name].map',
  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: '[id].chunk.js'
  85
  86   },
  87
  88   plugins: [
  89
  90     /**
  91      * Plugin: DefinePlugin
  92      * Description: Define free variables.
  93      * Useful for having development builds with debug logging or adding global constants.
  94      *
  95      * Environment helpers
  96      *
  97      * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
  98      */
  99     // NOTE: when adding more properties, make sure you include them in custom-typings.d.ts
 100     new DefinePlugin({
 101       'ENV': JSON.stringify(METADATA.ENV),
 102       'HMR': METADATA.HMR,
 103       'process.env': {
 104         'ENV': JSON.stringify(METADATA.ENV),
 105         'NODE_ENV': JSON.stringify(METADATA.ENV),
 106         'HMR': METADATA.HMR
 107       }
 108     })
 109   ],
 110
 111   /**
 112    * Static analysis linter for TypeScript advanced options configuration
 113    * Description: An extensible linter for the TypeScript language.
 114    *
 115    * See: https://github.com/wbuchwalter/tslint-loader
 116    */
 117   tslint: {
 118     emitErrors: false,
 119     failOnHint: false,
 120     resourcePath: 'src'
 121   },
 122
 123   /**
 124    * Webpack Development Server configuration
 125    * Description: The webpack-dev-server is a little node.js Express server.
 126    * The server emits information about the compilation state to the client,
 127    * which reacts to those events.
 128    *
 129    * See: https://webpack.github.io/docs/webpack-dev-server.html
 130    */
 131   devServer: {
 132     port: METADATA.port,
 133     host: METADATA.host,
 134     historyApiFallback: true,
 135     watchOptions: {
 136       aggregateTimeout: 300,
 137       poll: 1000
 138     },
 139     outputPath: helpers.root('dist')
 140   },
 141
 142   /*
 143    * Include polyfills or mocks for various node stuff
 144    * Description: Node configuration
 145    *
 146    * See: https://webpack.github.io/docs/configuration.html#node
 147    */
 148   node: {
 149     global: 'window',
 150     crypto: 'empty',
 151     process: true,
 152     module: false,
 153     clearImmediate: false,
 154     setImmediate: false
 155   }
 156
 157 })