client/config/webpack.common.js

   1 const webpack = require('webpack')
   2 const helpers = require('./helpers')
   3
   4 /*
   5  * Webpack Plugins
   6  */
   7
   8 var CopyWebpackPlugin = (CopyWebpackPlugin = require('copy-webpack-plugin'), CopyWebpackPlugin.default || CopyWebpackPlugin)
   9 const HtmlWebpackPlugin = require('html-webpack-plugin')
  10 const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin
  11
  12 /*
  13  * Webpack Constants
  14  */
  15 const METADATA = {
  16   title: 'PeerTube',
  17   baseUrl: '/'
  18 }
  19
  20 /*
  21  * Webpack configuration
  22  *
  23  * See: http://webpack.github.io/docs/configuration.html#cli
  24  */
  25 module.exports = {
  26   /*
  27    * Static metadata for index.html
  28    *
  29    * See: (custom attribute)
  30    */
  31   metadata: METADATA,
  32
  33   /*
  34    * Cache generated modules and chunks to improve performance for multiple incremental builds.
  35    * This is enabled by default in watch mode.
  36    * You can pass false to disable it.
  37    *
  38    * See: http://webpack.github.io/docs/configuration.html#cache
  39    */
  40   // cache: false,
  41
  42   /*
  43    * The entry point for the bundle
  44    * Our Angular.js app
  45    *
  46    * See: http://webpack.github.io/docs/configuration.html#entry
  47    */
  48   entry: {
  49     'polyfills': './src/polyfills.ts',
  50     'vendor': './src/vendor.ts',
  51     'main': './src/main.ts'
  52   },
  53
  54   /*
  55    * Options affecting the resolving of modules.
  56    *
  57    * See: http://webpack.github.io/docs/configuration.html#resolve
  58    */
  59   resolve: {
  60     /*
  61      * An array of extensions that should be used to resolve modules.
  62      *
  63      * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
  64      */
  65     extensions: [ '', '.ts', '.js', '.scss' ],
  66
  67     // Make sure root is src
  68     root: helpers.root('src'),
  69
  70     // remove other default values
  71     modulesDirectories: [ 'node_modules', 'node_modules/blueimp-file-upload/js/vendor' ],
  72
  73     packageAlias: 'browser'
  74
  75   },
  76
  77   output: {
  78     publicPath: '/client/'
  79   },
  80
  81   /*
  82    * Options affecting the normal modules.
  83    *
  84    * See: http://webpack.github.io/docs/configuration.html#module
  85    */
  86   module: {
  87     /*
  88      * An array of applied pre and post loaders.
  89      *
  90      * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
  91      */
  92     preLoaders: [
  93
  94       /*
  95        * Tslint loader support for *.ts files
  96        *
  97        * See: https://github.com/wbuchwalter/tslint-loader
  98        */
  99       // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
 100
 101       /*
 102        * Source map loader support for *.js files
 103        * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
 104        *
 105        * See: https://github.com/webpack/source-map-loader
 106        */
 107       {
 108         test: /\.js$/,
 109         loader: 'source-map-loader',
 110         exclude: [
 111           // these packages have problems with their sourcemaps
 112           helpers.root('node_modules/rxjs'),
 113           helpers.root('node_modules/@angular')
 114         ]
 115       }
 116
 117     ],
 118
 119     /*
 120      * An array of automatically applied loaders.
 121      *
 122      * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
 123      * This means they are not resolved relative to the configuration file.
 124      *
 125      * See: http://webpack.github.io/docs/configuration.html#module-loaders
 126      */
 127     loaders: [
 128
 129       /*
 130        * Typescript loader support for .ts and Angular 2 async routes via .async.ts
 131        *
 132        * See: https://github.com/s-panferov/awesome-typescript-loader
 133        */
 134       {
 135         test: /\.ts$/,
 136         loader: 'awesome-typescript-loader',
 137         exclude: [/\.(spec|e2e)\.ts$/]
 138       },
 139
 140       /*
 141        * Json loader support for *.json files.
 142        *
 143        * See: https://github.com/webpack/json-loader
 144        */
 145       {
 146         test: /\.json$/,
 147         loader: 'json-loader'
 148       },
 149
 150       {
 151         test: /\.scss$/,
 152         exclude: /node_modules/,
 153         loaders: [ 'raw-loader', 'sass-loader' ]
 154       },
 155
 156       {
 157         test: /\.(woff2?|ttf|eot|svg)$/,
 158         loader: 'url?limit=10000&name=assets/fonts/[hash].[ext]'
 159       },
 160
 161       /* Raw loader support for *.html
 162        * Returns file content as string
 163        *
 164        * See: https://github.com/webpack/raw-loader
 165        */
 166       {
 167         test: /\.html$/,
 168         loader: 'raw-loader',
 169         exclude: [ helpers.root('src/index.html') ]
 170       }
 171
 172     ]
 173
 174   },
 175
 176   /*
 177    * Add additional plugins to the compiler.
 178    *
 179    * See: http://webpack.github.io/docs/configuration.html#plugins
 180    */
 181   plugins: [
 182
 183     /*
 184      * Plugin: ForkCheckerPlugin
 185      * Description: Do type checking in a separate process, so webpack don't need to wait.
 186      *
 187      * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
 188      */
 189     new ForkCheckerPlugin(),
 190
 191     /*
 192      * Plugin: OccurenceOrderPlugin
 193      * Description: Varies the distribution of the ids to get the smallest id length
 194      * for often used ids.
 195      *
 196      * See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
 197      * See: https://github.com/webpack/docs/wiki/optimization#minimize
 198      */
 199     new webpack.optimize.OccurenceOrderPlugin(true),
 200
 201     /*
 202      * Plugin: CommonsChunkPlugin
 203      * Description: Shares common code between the pages.
 204      * It identifies common modules and put them into a commons chunk.
 205      *
 206      * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
 207      * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
 208      */
 209     new webpack.optimize.CommonsChunkPlugin({
 210       name: [ 'polyfills', 'vendor' ].reverse()
 211     }),
 212
 213     /*
 214      * Plugin: CopyWebpackPlugin
 215      * Description: Copy files and directories in webpack.
 216      *
 217      * Copies project static assets.
 218      *
 219      * See: https://www.npmjs.com/package/copy-webpack-plugin
 220      */
 221     new CopyWebpackPlugin([{
 222       from: 'src/assets',
 223       to: 'assets'
 224     }]),
 225
 226     /*
 227      * Plugin: HtmlWebpackPlugin
 228      * Description: Simplifies creation of HTML files to serve your webpack bundles.
 229      * This is especially useful for webpack bundles that include a hash in the filename
 230      * which changes every compilation.
 231      *
 232      * See: https://github.com/ampedandwired/html-webpack-plugin
 233      */
 234     new HtmlWebpackPlugin({
 235       template: 'src/index.html',
 236       chunksSortMode: 'dependency'
 237     }),
 238
 239     new webpack.ProvidePlugin({
 240       jQuery: 'jquery',
 241       $: 'jquery',
 242       jquery: 'jquery',
 243       WebTorrent: 'webtorrent/webtorrent.min'
 244     })
 245
 246   ],
 247
 248   /*
 249    * Include polyfills or mocks for various node stuff
 250    * Description: Node configuration
 251    *
 252    * See: https://webpack.github.io/docs/configuration.html#node
 253    */
 254   node: {
 255     global: 'window',
 256     crypto: 'empty',
 257     fs: 'empty',
 258     events: true,
 259     module: false,
 260     clearImmediate: false,
 261     setImmediate: false
 262   }
 263
 264 }