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 const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin')
  10
  11 /**
  12  * Webpack Constants
  13  */
  14 const ENV = process.env.ENV = process.env.NODE_ENV = 'development'
  15 const HOST = process.env.HOST || 'localhost'
  16 const PORT = process.env.PORT || 3000
  17 const HMR = helpers.hasProcessFlag('hot')
  18 const METADATA = webpackMerge(commonConfig.metadata, {
  19   host: HOST,
  20   port: PORT,
  21   ENV: ENV,
  22   HMR: HMR
  23 })
  24
  25 /**
  26  * Webpack configuration
  27  *
  28  * See: http://webpack.github.io/docs/configuration.html#cli
  29  */
  30 module.exports = webpackMerge(commonConfig, {
  31   /**
  32    * Merged metadata from webpack.common.js for index.html
  33    *
  34    * See: (custom attribute)
  35    */
  36   metadata: METADATA,
  37
  38   /**
  39    * Switch loaders to debug mode.
  40    *
  41    * See: http://webpack.github.io/docs/configuration.html#debug
  42    */
  43   debug: true,
  44
  45   /**
  46    * Developer tool to enhance debugging
  47    *
  48    * See: http://webpack.github.io/docs/configuration.html#devtool
  49    * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
  50    */
  51   devtool: 'cheap-module-source-map',
  52
  53   /**
  54    * Options affecting the output of the compilation.
  55    *
  56    * See: http://webpack.github.io/docs/configuration.html#output
  57    */
  58   output: {
  59     /**
  60      * The output directory as absolute path (required).
  61      *
  62      * See: http://webpack.github.io/docs/configuration.html#output-path
  63      */
  64     path: helpers.root('dist'),
  65
  66     /**
  67      * Specifies the name of each output file on disk.
  68      * IMPORTANT: You must not specify an absolute path here!
  69      *
  70      * See: http://webpack.github.io/docs/configuration.html#output-filename
  71      */
  72     filename: '[name].bundle.js',
  73
  74     /**
  75      * The filename of the SourceMaps for the JavaScript files.
  76      * They are inside the output.path directory.
  77      *
  78      * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
  79      */
  80     sourceMapFilename: '[name].map',
  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: '[id].chunk.js',
  88
  89     library: 'ac_[name]',
  90     libraryTarget: 'var'
  91
  92   },
  93
  94   externals: {
  95     webtorrent: 'WebTorrent'
  96   },
  97
  98   plugins: [
  99
 100     /**
 101      * Plugin: DefinePlugin
 102      * Description: Define free variables.
 103      * Useful for having development builds with debug logging or adding global constants.
 104      *
 105      * Environment helpers
 106      *
 107      * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 108      */
 109     // NOTE: when adding more properties, make sure you include them in custom-typings.d.ts
 110     new DefinePlugin({
 111       'ENV': JSON.stringify(METADATA.ENV),
 112       'HMR': METADATA.HMR,
 113       'process.env': {
 114         'ENV': JSON.stringify(METADATA.ENV),
 115         'NODE_ENV': JSON.stringify(METADATA.ENV),
 116         'HMR': METADATA.HMR
 117       }
 118     }),
 119
 120     new NamedModulesPlugin()
 121   ],
 122
 123   /**
 124    * Static analysis linter for TypeScript advanced options configuration
 125    * Description: An extensible linter for the TypeScript language.
 126    *
 127    * See: https://github.com/wbuchwalter/tslint-loader
 128    */
 129   tslint: {
 130     emitErrors: false,
 131     failOnHint: false,
 132     resourcePath: 'src'
 133   },
 134
 135   devServer: {
 136     port: METADATA.port,
 137     host: METADATA.host,
 138     historyApiFallback: true,
 139     watchOptions: {
 140       aggregateTimeout: 300,
 141       poll: 1000
 142     },
 143     outputPath: helpers.root('dist')
 144   },
 145
 146   /*
 147    * Include polyfills or mocks for various node stuff
 148    * Description: Node configuration
 149    *
 150    * See: https://webpack.github.io/docs/configuration.html#node
 151    */
 152   node: {
 153     global: 'window',
 154     crypto: 'empty',
 155     process: true,
 156     module: false,
 157     clearImmediate: false,
 158     setImmediate: false
 159   }
 160
 161 })