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        * Raw loader support for *.css files
 152        * Returns file content as string
 153        *
 154        * See: https://github.com/webpack/raw-loader
 155        */
 156       {
 157         test: /\.scss$/,
 158         exclude: /node_modules/,
 159         loaders: [ 'raw-loader', 'sass-loader' ]
 160       },
 161
 162       {
 163         test: /\.(woff2?|ttf|eot|svg)$/,
 164         loader: 'url?limit=10000&name=assets/fonts/[hash].[ext]'
 165       },
 166
 167       /* Raw loader support for *.html
 168        * Returns file content as string
 169        *
 170        * See: https://github.com/webpack/raw-loader
 171        */
 172       {
 173         test: /\.html$/,
 174         loader: 'raw-loader',
 175         exclude: [ helpers.root('src/index.html') ]
 176       }
 177
 178     ]
 179
 180   },
 181
 182   /*
 183    * Add additional plugins to the compiler.
 184    *
 185    * See: http://webpack.github.io/docs/configuration.html#plugins
 186    */
 187   plugins: [
 188
 189     /*
 190      * Plugin: ForkCheckerPlugin
 191      * Description: Do type checking in a separate process, so webpack don't need to wait.
 192      *
 193      * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
 194      */
 195     new ForkCheckerPlugin(),
 196
 197     /*
 198      * Plugin: OccurenceOrderPlugin
 199      * Description: Varies the distribution of the ids to get the smallest id length
 200      * for often used ids.
 201      *
 202      * See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
 203      * See: https://github.com/webpack/docs/wiki/optimization#minimize
 204      */
 205     new webpack.optimize.OccurenceOrderPlugin(true),
 206
 207     /*
 208      * Plugin: CommonsChunkPlugin
 209      * Description: Shares common code between the pages.
 210      * It identifies common modules and put them into a commons chunk.
 211      *
 212      * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
 213      * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
 214      */
 215     new webpack.optimize.CommonsChunkPlugin({
 216       name: [ 'polyfills', 'vendor' ].reverse()
 217     }),
 218
 219     /*
 220      * Plugin: CopyWebpackPlugin
 221      * Description: Copy files and directories in webpack.
 222      *
 223      * Copies project static assets.
 224      *
 225      * See: https://www.npmjs.com/package/copy-webpack-plugin
 226      */
 227     new CopyWebpackPlugin([{
 228       from: 'src/assets',
 229       to: 'assets'
 230     }]),
 231
 232     /*
 233      * Plugin: HtmlWebpackPlugin
 234      * Description: Simplifies creation of HTML files to serve your webpack bundles.
 235      * This is especially useful for webpack bundles that include a hash in the filename
 236      * which changes every compilation.
 237      *
 238      * See: https://github.com/ampedandwired/html-webpack-plugin
 239      */
 240     new HtmlWebpackPlugin({
 241       template: 'src/index.html',
 242       chunksSortMode: 'dependency'
 243     }),
 244
 245     new webpack.ProvidePlugin({
 246       jQuery: 'jquery',
 247       $: 'jquery',
 248       jquery: 'jquery',
 249       WebTorrent: 'webtorrent/webtorrent.min'
 250     })
 251
 252   ],
 253
 254   /*
 255    * Include polyfills or mocks for various node stuff
 256    * Description: Node configuration
 257    *
 258    * See: https://webpack.github.io/docs/configuration.html#node
 259    */
 260   node: {
 261     global: 'window',
 262     crypto: 'empty',
 263     fs: 'empty',
 264     events: true,
 265     module: false,
 266     clearImmediate: false,
 267     setImmediate: false
 268   }
 269
 270 }