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   output: {
  76     publicPath: '/client/'
  77   },
  78
  79   /*
  80    * Options affecting the normal modules.
  81    *
  82    * See: http://webpack.github.io/docs/configuration.html#module
  83    */
  84   module: {
  85     /*
  86      * An array of applied pre and post loaders.
  87      *
  88      * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
  89      */
  90     preLoaders: [
  91
  92       /*
  93        * Tslint loader support for *.ts files
  94        *
  95        * See: https://github.com/wbuchwalter/tslint-loader
  96        */
  97       // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
  98
  99       /*
 100        * Source map loader support for *.js files
 101        * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
 102        *
 103        * See: https://github.com/webpack/source-map-loader
 104        */
 105       {
 106         test: /\.js$/,
 107         loader: 'source-map-loader',
 108         exclude: [
 109           // these packages have problems with their sourcemaps
 110           helpers.root('node_modules/rxjs'),
 111           helpers.root('node_modules/@angular')
 112         ]
 113       }
 114
 115     ],
 116
 117     /*
 118      * An array of automatically applied loaders.
 119      *
 120      * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
 121      * This means they are not resolved relative to the configuration file.
 122      *
 123      * See: http://webpack.github.io/docs/configuration.html#module-loaders
 124      */
 125     loaders: [
 126
 127       /*
 128        * Typescript loader support for .ts and Angular 2 async routes via .async.ts
 129        *
 130        * See: https://github.com/s-panferov/awesome-typescript-loader
 131        */
 132       {
 133         test: /\.ts$/,
 134         loader: 'awesome-typescript-loader',
 135         exclude: [/\.(spec|e2e)\.ts$/]
 136       },
 137
 138       /*
 139        * Json loader support for *.json files.
 140        *
 141        * See: https://github.com/webpack/json-loader
 142        */
 143       {
 144         test: /\.json$/,
 145         loader: 'json-loader'
 146       },
 147
 148       /*
 149        * Raw loader support for *.css files
 150        * Returns file content as string
 151        *
 152        * See: https://github.com/webpack/raw-loader
 153        */
 154       {
 155         test: /\.scss$/,
 156         exclude: /node_modules/,
 157         loaders: [ 'raw-loader', 'sass-loader' ]
 158       },
 159
 160       {
 161         test: /\.(woff2?|ttf|eot|svg)$/,
 162         loader: 'url?limit=10000&name=assets/fonts/[hash].[ext]'
 163       },
 164
 165       /* Raw loader support for *.html
 166        * Returns file content as string
 167        *
 168        * See: https://github.com/webpack/raw-loader
 169        */
 170       {
 171         test: /\.html$/,
 172         loader: 'raw-loader',
 173         exclude: [ helpers.root('src/index.html') ]
 174       }
 175
 176     ]
 177
 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       from: 'src/assets',
 227       to: 'assets'
 228     }]),
 229
 230     /*
 231      * Plugin: HtmlWebpackPlugin
 232      * Description: Simplifies creation of HTML files to serve your webpack bundles.
 233      * This is especially useful for webpack bundles that include a hash in the filename
 234      * which changes every compilation.
 235      *
 236      * See: https://github.com/ampedandwired/html-webpack-plugin
 237      */
 238     new HtmlWebpackPlugin({
 239       template: 'src/index.html',
 240       chunksSortMode: 'dependency'
 241     }),
 242
 243     new webpack.ProvidePlugin({
 244       jQuery: 'jquery',
 245       $: 'jquery',
 246       jquery: 'jquery'
 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     module: false,
 261     clearImmediate: false,
 262     setImmediate: false
 263   }
 264
 265 }