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' ],
  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   sassLoader: {
 177     precision: 10
 178   },
 179
 180   /*
 181    * Add additional plugins to the compiler.
 182    *
 183    * See: http://webpack.github.io/docs/configuration.html#plugins
 184    */
 185   plugins: [
 186
 187     /*
 188      * Plugin: ForkCheckerPlugin
 189      * Description: Do type checking in a separate process, so webpack don't need to wait.
 190      *
 191      * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
 192      */
 193     new ForkCheckerPlugin(),
 194
 195     /*
 196      * Plugin: OccurenceOrderPlugin
 197      * Description: Varies the distribution of the ids to get the smallest id length
 198      * for often used ids.
 199      *
 200      * See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
 201      * See: https://github.com/webpack/docs/wiki/optimization#minimize
 202      */
 203     new webpack.optimize.OccurenceOrderPlugin(true),
 204
 205     /*
 206      * Plugin: CommonsChunkPlugin
 207      * Description: Shares common code between the pages.
 208      * It identifies common modules and put them into a commons chunk.
 209      *
 210      * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
 211      * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
 212      */
 213     new webpack.optimize.CommonsChunkPlugin({
 214       name: [ 'polyfills', 'vendor' ].reverse()
 215     }),
 216
 217     /*
 218      * Plugin: CopyWebpackPlugin
 219      * Description: Copy files and directories in webpack.
 220      *
 221      * Copies project static assets.
 222      *
 223      * See: https://www.npmjs.com/package/copy-webpack-plugin
 224      */
 225     new CopyWebpackPlugin([
 226       {
 227         from: 'src/assets',
 228         to: 'assets'
 229       },
 230       {
 231         from: 'node_modules/webtorrent/webtorrent.min.js',
 232         to: 'assets/webtorrent'
 233       }
 234     ]),
 235
 236     /*
 237      * Plugin: HtmlWebpackPlugin
 238      * Description: Simplifies creation of HTML files to serve your webpack bundles.
 239      * This is especially useful for webpack bundles that include a hash in the filename
 240      * which changes every compilation.
 241      *
 242      * See: https://github.com/ampedandwired/html-webpack-plugin
 243      */
 244     new HtmlWebpackPlugin({
 245       template: 'src/index.html',
 246       chunksSortMode: 'dependency'
 247     }),
 248
 249   ],
 250
 251   /*
 252    * Include polyfills or mocks for various node stuff
 253    * Description: Node configuration
 254    *
 255    * See: https://webpack.github.io/docs/configuration.html#node
 256    */
 257   node: {
 258     global: 'window',
 259     crypto: 'empty',
 260     fs: 'empty',
 261     events: true,
 262     module: false,
 263     clearImmediate: false,
 264     setImmediate: false
 265   }
 266
 267 }