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   },
  74
  75   /*
  76    * Options affecting the normal modules.
  77    *
  78    * See: http://webpack.github.io/docs/configuration.html#module
  79    */
  80   module: {
  81     /*
  82      * An array of applied pre and post loaders.
  83      *
  84      * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
  85      */
  86     preLoaders: [
  87
  88       /*
  89        * Tslint loader support for *.ts files
  90        *
  91        * See: https://github.com/wbuchwalter/tslint-loader
  92        */
  93       // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
  94
  95       /*
  96        * Source map loader support for *.js files
  97        * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
  98        *
  99        * See: https://github.com/webpack/source-map-loader
 100        */
 101       {
 102         test: /\.js$/,
 103         loader: 'source-map-loader',
 104         exclude: [
 105           // these packages have problems with their sourcemaps
 106           helpers.root('node_modules/rxjs'),
 107           helpers.root('node_modules/@angular')
 108         ]
 109       }
 110
 111     ],
 112
 113     /*
 114      * An array of automatically applied loaders.
 115      *
 116      * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
 117      * This means they are not resolved relative to the configuration file.
 118      *
 119      * See: http://webpack.github.io/docs/configuration.html#module-loaders
 120      */
 121     loaders: [
 122
 123       /*
 124        * Typescript loader support for .ts and Angular 2 async routes via .async.ts
 125        *
 126        * See: https://github.com/s-panferov/awesome-typescript-loader
 127        */
 128       {
 129         test: /\.ts$/,
 130         loader: 'awesome-typescript-loader',
 131         exclude: [/\.(spec|e2e)\.ts$/]
 132       },
 133
 134       /*
 135        * Json loader support for *.json files.
 136        *
 137        * See: https://github.com/webpack/json-loader
 138        */
 139       {
 140         test: /\.json$/,
 141         loader: 'json-loader'
 142       },
 143
 144       /*
 145        * Raw loader support for *.css files
 146        * Returns file content as string
 147        *
 148        * See: https://github.com/webpack/raw-loader
 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     })
 244
 245   ],
 246
 247   /*
 248    * Include polyfills or mocks for various node stuff
 249    * Description: Node configuration
 250    *
 251    * See: https://webpack.github.io/docs/configuration.html#node
 252    */
 253   node: {
 254     global: 'window',
 255     crypto: 'empty',
 256     module: false,
 257     clearImmediate: false,
 258     setImmediate: false
 259   }
 260
 261 }