client/config/webpack.dev.js

   1 const helpers = require('./helpers')
   2 const webpackMerge = require('webpack-merge') // used to merge webpack configs
   3 const webpackMergeDll = webpackMerge.strategy({plugins: 'replace'})
   4 const commonConfig = require('./webpack.common.js') // the settings that are common to prod and dev
   5
   6 /**
   7  * Webpack Plugins
   8  */
   9 const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
  10 const DefinePlugin = require('webpack/lib/DefinePlugin')
  11 const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin')
  12 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
  13
  14 /**
  15  * Webpack Constants
  16  */
  17 const ENV = process.env.ENV = process.env.NODE_ENV = 'development'
  18 const HOST = process.env.HOST || 'localhost'
  19 const PORT = process.env.PORT || 3000
  20 const HMR = helpers.hasProcessFlag('hot')
  21 const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
  22   host: HOST,
  23   port: PORT,
  24   ENV: ENV,
  25   HMR: HMR
  26 })
  27
  28 const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin
  29
  30 /**
  31  * Webpack configuration
  32  *
  33  * See: http://webpack.github.io/docs/configuration.html#cli
  34  */
  35 module.exports = function (env) {
  36   return webpackMerge(commonConfig({ env: ENV }), {
  37     /**
  38     * Developer tool to enhance debugging
  39     *
  40     * See: http://webpack.github.io/docs/configuration.html#devtool
  41     * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
  42     */
  43     devtool: 'cheap-module-source-map',
  44
  45     /**
  46     * Options affecting the output of the compilation.
  47     *
  48     * See: http://webpack.github.io/docs/configuration.html#output
  49     */
  50     output: {
  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].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].map',
  73
  74       /** The filename of non-entry chunks as relative path
  75       * inside the output.path directory.
  76       *
  77       * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
  78       */
  79       chunkFilename: '[id].chunk.js',
  80
  81       library: 'ac_[name]',
  82       libraryTarget: 'var',
  83
  84       publicPath: '/client/'
  85     },
  86
  87     externals: {
  88       webtorrent: 'WebTorrent'
  89     },
  90
  91     plugins: [
  92
  93       /**
  94       * Plugin: DefinePlugin
  95       * Description: Define free variables.
  96       * Useful for having development builds with debug logging or adding global constants.
  97       *
  98       * Environment helpers
  99       *
 100       * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 101       */
 102       // NOTE: when adding more properties, make sure you include them in custom-typings.d.ts
 103       new DefinePlugin({
 104         'ENV': JSON.stringify(METADATA.ENV),
 105         'HMR': METADATA.HMR,
 106         'process.env': {
 107           'ENV': JSON.stringify(METADATA.ENV),
 108           'NODE_ENV': JSON.stringify(METADATA.ENV),
 109           'HMR': METADATA.HMR
 110         }
 111       }),
 112
 113       new DllBundlesPlugin({
 114         bundles: {
 115           polyfills: [
 116             'core-js',
 117             {
 118               name: 'zone.js',
 119               path: 'zone.js/dist/zone.js'
 120             },
 121             {
 122               name: 'zone.js',
 123               path: 'zone.js/dist/long-stack-trace-zone.js'
 124             },
 125             'ts-helpers'
 126           ],
 127           vendor: [
 128             '@angular/platform-browser',
 129             '@angular/platform-browser-dynamic',
 130             '@angular/core',
 131             '@angular/common',
 132             '@angular/forms',
 133             '@angular/http',
 134             '@angular/router',
 135             '@angularclass/hmr',
 136             'rxjs'
 137           ]
 138         },
 139         dllDir: helpers.root('dll'),
 140         webpackConfig: webpackMergeDll(commonConfig({env: ENV}), {
 141           devtool: 'cheap-module-source-map',
 142           plugins: []
 143         })
 144       }),
 145
 146       /**
 147        * Plugin: AddAssetHtmlPlugin
 148        * Description: Adds the given JS or CSS file to the files
 149        * Webpack knows about, and put it into the list of assets
 150        * html-webpack-plugin injects into the generated html.
 151        *
 152        * See: https://github.com/SimenB/add-asset-html-webpack-plugin
 153        */
 154       new AddAssetHtmlPlugin([
 155         { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
 156         { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
 157       ]),
 158
 159       /**
 160       * Plugin: NamedModulesPlugin (experimental)
 161       * Description: Uses file names as module name.
 162       *
 163       * See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb
 164       */
 165       new NamedModulesPlugin(),
 166
 167       /**
 168       * Plugin LoaderOptionsPlugin (experimental)
 169       *
 170       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
 171       */
 172       new LoaderOptionsPlugin({
 173         debug: true,
 174         options: {
 175
 176           /**
 177           * Static analysis linter for TypeScript advanced options configuration
 178           * Description: An extensible linter for the TypeScript language.
 179           *
 180           * See: https://github.com/wbuchwalter/tslint-loader
 181           */
 182           tslint: {
 183             emitErrors: false,
 184             failOnHint: false,
 185             resourcePath: 'src'
 186           },
 187
 188           // FIXME: Remove
 189           // https://github.com/bholloway/resolve-url-loader/issues/36
 190           // https://github.com/jtangelder/sass-loader/issues/289
 191           context: __dirname,
 192           output: {
 193             path: helpers.root('dist')
 194           }
 195
 196         }
 197       })
 198
 199     ],
 200
 201     /**
 202     * Webpack Development Server configuration
 203     * Description: The webpack-dev-server is a little node.js Express server.
 204     * The server emits information about the compilation state to the client,
 205     * which reacts to those events.
 206     *
 207     * See: https://webpack.github.io/docs/webpack-dev-server.html
 208     */
 209     devServer: {
 210       port: METADATA.port,
 211       host: METADATA.host,
 212       historyApiFallback: true,
 213       watchOptions: {
 214         aggregateTimeout: 300,
 215         poll: 1000
 216       },
 217       outputPath: helpers.root('dist')
 218     },
 219
 220     /*
 221     * Include polyfills or mocks for various node stuff
 222     * Description: Node configuration
 223     *
 224     * See: https://webpack.github.io/docs/configuration.html#node
 225     */
 226     node: {
 227       global: true,
 228       crypto: 'empty',
 229       process: true,
 230       module: false,
 231       clearImmediate: false,
 232       setImmediate: false
 233     }
 234   })
 235 }