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   API_URL: 'http://localhost:9000'
  27 })
  28
  29 const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin
  30
  31 /**
  32  * Webpack configuration
  33  *
  34  * See: http://webpack.github.io/docs/configuration.html#cli
  35  */
  36 module.exports = function (env) {
  37   return webpackMerge(commonConfig({ env: ENV }), {
  38     /**
  39     * Developer tool to enhance debugging
  40     *
  41     * See: http://webpack.github.io/docs/configuration.html#devtool
  42     * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
  43     */
  44     devtool: 'cheap-module-source-map',
  45
  46     /**
  47     * Options affecting the output of the compilation.
  48     *
  49     * See: http://webpack.github.io/docs/configuration.html#output
  50     */
  51     output: {
  52       /**
  53       * The output directory as absolute path (required).
  54       *
  55       * See: http://webpack.github.io/docs/configuration.html#output-path
  56       */
  57       path: helpers.root('dist'),
  58
  59       /**
  60       * Specifies the name of each output file on disk.
  61       * IMPORTANT: You must not specify an absolute path here!
  62       *
  63       * See: http://webpack.github.io/docs/configuration.html#output-filename
  64       */
  65       filename: '[name].bundle.js',
  66
  67       /**
  68       * The filename of the SourceMaps for the JavaScript files.
  69       * They are inside the output.path directory.
  70       *
  71       * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
  72       */
  73       sourceMapFilename: '[name].map',
  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].chunk.js',
  81
  82       library: 'ac_[name]',
  83       libraryTarget: 'var'
  84     },
  85
  86     module: {
  87
  88       // Too slow, life is short
  89       // rules: [
  90       //   {
  91       //     test: /\.ts$/,
  92       //     use: [
  93       //       {
  94       //         loader: 'tslint-loader',
  95       //         options: {
  96       //           configFile: 'tslint.json'
  97       //         }
  98       //       }
  99       //     ],
 100       //     exclude: [
 101       //       /\.(spec|e2e)\.ts$/,
 102       //       /node_modules\//
 103       //     ]
 104       //   }
 105       // ]
 106     },
 107
 108     plugins: [
 109
 110       /**
 111       * Plugin: DefinePlugin
 112       * Description: Define free variables.
 113       * Useful for having development builds with debug logging or adding global constants.
 114       *
 115       * Environment helpers
 116       *
 117       * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 118       */
 119       // NOTE: when adding more properties, make sure you include them in custom-typings.d.ts
 120       new DefinePlugin({
 121         'ENV': JSON.stringify(METADATA.ENV),
 122         'HMR': METADATA.HMR,
 123         'API_URL': JSON.stringify(METADATA.API_URL),
 124         'process.version': JSON.stringify(process.version),
 125         'process.env': {
 126           'ENV': JSON.stringify(METADATA.ENV),
 127           'NODE_ENV': JSON.stringify(METADATA.ENV),
 128           'HMR': METADATA.HMR
 129         }
 130       }),
 131
 132       new DllBundlesPlugin({
 133         bundles: {
 134           polyfills: [
 135             'core-js',
 136             {
 137               name: 'zone.js',
 138               path: 'zone.js/dist/zone.js'
 139             },
 140             {
 141               name: 'zone.js',
 142               path: 'zone.js/dist/long-stack-trace-zone.js'
 143             }
 144           ],
 145           vendor: [
 146             '@angular/platform-browser',
 147             '@angular/platform-browser-dynamic',
 148             '@angular/core',
 149             '@angular/common',
 150             '@angular/forms',
 151             '@angular/http',
 152             '@angular/router',
 153             '@angularclass/hmr',
 154             'rxjs'
 155           ]
 156         },
 157         dllDir: helpers.root('dll'),
 158         webpackConfig: webpackMergeDll(commonConfig({env: ENV}), {
 159           devtool: 'cheap-module-source-map',
 160           plugins: []
 161         })
 162       }),
 163
 164       /**
 165        * Plugin: AddAssetHtmlPlugin
 166        * Description: Adds the given JS or CSS file to the files
 167        * Webpack knows about, and put it into the list of assets
 168        * html-webpack-plugin injects into the generated html.
 169        *
 170        * See: https://github.com/SimenB/add-asset-html-webpack-plugin
 171        */
 172       new AddAssetHtmlPlugin([
 173         { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
 174         { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
 175       ]),
 176
 177       /**
 178       * Plugin: NamedModulesPlugin (experimental)
 179       * Description: Uses file names as module name.
 180       *
 181       * See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb
 182       */
 183       new NamedModulesPlugin(),
 184
 185       /**
 186       * Plugin LoaderOptionsPlugin (experimental)
 187       *
 188       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
 189       */
 190       new LoaderOptionsPlugin({
 191         debug: true,
 192         options: {
 193
 194           /**
 195           * Static analysis linter for TypeScript advanced options configuration
 196           * Description: An extensible linter for the TypeScript language.
 197           *
 198           * See: https://github.com/wbuchwalter/tslint-loader
 199           */
 200           tslint: {
 201             emitErrors: false,
 202             failOnHint: false,
 203             typeCheck: true,
 204             resourcePath: 'src'
 205           },
 206
 207           // FIXME: Remove
 208           // https://github.com/bholloway/resolve-url-loader/issues/36
 209           // https://github.com/jtangelder/sass-loader/issues/289
 210           context: __dirname,
 211           output: {
 212             path: helpers.root('dist')
 213           }
 214
 215         }
 216       })
 217
 218     ],
 219
 220     /**
 221     * Webpack Development Server configuration
 222     * Description: The webpack-dev-server is a little node.js Express server.
 223     * The server emits information about the compilation state to the client,
 224     * which reacts to those events.
 225     *
 226     * See: https://webpack.github.io/docs/webpack-dev-server.html
 227     */
 228     devServer: {
 229       port: METADATA.port,
 230       host: METADATA.host,
 231       historyApiFallback: true,
 232       watchOptions: {
 233         ignored: /node_modules/
 234       }
 235     },
 236
 237     /*
 238     * Include polyfills or mocks for various node stuff
 239     * Description: Node configuration
 240     *
 241     * See: https://webpack.github.io/docs/configuration.html#node
 242     */
 243     node: {
 244       global: true,
 245       crypto: 'empty',
 246       fs: 'empty',
 247       process: true,
 248       module: false,
 249       clearImmediate: false,
 250       setImmediate: false
 251     }
 252   })
 253 }