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