client/config/webpack.common.js

   1 const webpack = require('webpack')
   2 const helpers = require('./helpers')
   3
   4 /*
   5  * Webpack Plugins
   6  */
   7
   8 const CopyWebpackPlugin = require('copy-webpack-plugin')
   9 const HtmlWebpackPlugin = require('html-webpack-plugin')
  10 const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin
  11 const AssetsPlugin = require('assets-webpack-plugin')
  12 const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin')
  13 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
  14 const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
  15 const WebpackNotifierPlugin = require('webpack-notifier')
  16
  17 /*
  18  * Webpack Constants
  19  */
  20 const METADATA = {
  21   title: 'PeerTube',
  22   baseUrl: '/',
  23   isDevServer: helpers.isWebpackDevServer()
  24 }
  25
  26 /*
  27  * Webpack configuration
  28  *
  29  * See: http://webpack.github.io/docs/configuration.html#cli
  30  */
  31 module.exports = function (options) {
  32   var isProd = options.env === 'production'
  33
  34   return {
  35
  36     /*
  37      * Cache generated modules and chunks to improve performance for multiple incremental builds.
  38      * This is enabled by default in watch mode.
  39      * You can pass false to disable it.
  40      *
  41      * See: http://webpack.github.io/docs/configuration.html#cache
  42      */
  43     // cache: false,
  44
  45     /*
  46      * The entry point for the bundle
  47      * Our Angular.js app
  48      *
  49      * See: http://webpack.github.io/docs/configuration.html#entry
  50      */
  51     entry: {
  52       'polyfills': './src/polyfills.ts',
  53       'vendor': './src/vendor.ts',
  54       'main': './src/main.ts'
  55     },
  56
  57     /*
  58      * Options affecting the resolving of modules.
  59      *
  60      * See: http://webpack.github.io/docs/configuration.html#resolve
  61      */
  62     resolve: {
  63       /*
  64        * An array of extensions that should be used to resolve modules.
  65        *
  66        * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
  67        */
  68       extensions: [ '.ts', '.js', '.json', '.scss' ],
  69
  70       modules: [helpers.root('src'), 'node_modules'],
  71
  72       alias: {
  73         'video.js': 'video.js/dist/alt/video.novtt'
  74       }
  75     },
  76
  77     /*
  78      * Options affecting the normal modules.
  79      *
  80      * See: http://webpack.github.io/docs/configuration.html#module
  81      */
  82     module: {
  83
  84       rules: [
  85
  86         /*
  87          * Typescript loader support for .ts and Angular 2 async routes via .async.ts
  88          *
  89          * See: https://github.com/s-panferov/awesome-typescript-loader
  90          */
  91         {
  92           test: /\.ts$/,
  93           loaders: [
  94             '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
  95             'awesome-typescript-loader',
  96             'angular2-template-loader'
  97           ],
  98           exclude: [/\.(spec|e2e)\.ts$/]
  99         },
 100
 101         /*
 102          * Json loader support for *.json files.
 103          *
 104          * See: https://github.com/webpack/json-loader
 105          */
 106         {
 107           test: /\.json$/,
 108           loader: 'json-loader'
 109         },
 110
 111         {
 112           test: /\.(sass|scss)$/,
 113           loaders: ['css-to-string-loader', 'css-loader?sourceMap', 'resolve-url', 'sass-loader?sourceMap']
 114         },
 115         { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&minetype=application/font-woff' },
 116         { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file' },
 117
 118         /* Raw loader support for *.html
 119          * Returns file content as string
 120          *
 121          * See: https://github.com/webpack/raw-loader
 122          */
 123         {
 124           test: /\.html$/,
 125           loader: 'raw-loader',
 126           exclude: [ helpers.root('src/index.html'), helpers.root('src/standalone/videos/embed.html') ]
 127         }
 128
 129       ]
 130
 131     },
 132
 133     /*
 134      * Add additional plugins to the compiler.
 135      *
 136      * See: http://webpack.github.io/docs/configuration.html#plugins
 137      */
 138     plugins: [
 139       new AssetsPlugin({
 140         path: helpers.root('dist'),
 141         filename: 'webpack-assets.json',
 142         prettyPrint: true
 143       }),
 144
 145       /*
 146        * Plugin: ForkCheckerPlugin
 147        * Description: Do type checking in a separate process, so webpack don't need to wait.
 148        *
 149        * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
 150        */
 151       new ForkCheckerPlugin(),
 152
 153       /*
 154        * Plugin: CommonsChunkPlugin
 155        * Description: Shares common code between the pages.
 156        * It identifies common modules and put them into a commons chunk.
 157        *
 158        * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
 159        * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
 160        */
 161       new webpack.optimize.CommonsChunkPlugin({
 162         name: [ 'polyfills', 'vendor' ].reverse()
 163       }),
 164
 165       /**
 166        * Plugin: ContextReplacementPlugin
 167        * Description: Provides context to Angular's use of System.import
 168        *
 169        * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
 170        * See: https://github.com/angular/angular/issues/11580
 171        */
 172       new ContextReplacementPlugin(
 173         // The (\\|\/) piece accounts for path separators in *nix and Windows
 174         /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
 175         helpers.root('src') // location of your src
 176       ),
 177
 178       /*
 179        * Plugin: CopyWebpackPlugin
 180        * Description: Copy files and directories in webpack.
 181        *
 182        * Copies project static assets.
 183        *
 184        * See: https://www.npmjs.com/package/copy-webpack-plugin
 185        */
 186       // Used by embed.html
 187       new CopyWebpackPlugin([
 188         {
 189           from: 'src/assets',
 190           to: 'assets'
 191         },
 192         {
 193           from: 'node_modules/webtorrent/webtorrent.min.js',
 194           to: 'assets/webtorrent'
 195         },
 196         {
 197           from: 'node_modules/video.js/dist/video.min.js',
 198           to: 'assets/video-js'
 199         },
 200         {
 201           from: 'node_modules/video.js/dist/video-js.min.css',
 202           to: 'assets/video-js'
 203         },
 204         {
 205           from: 'node_modules/videojs-dock/dist/videojs-dock.min.js',
 206           to: 'assets/video-js'
 207         },
 208         {
 209           from: 'node_modules/videojs-dock/dist/videojs-dock.css',
 210           to: 'assets/video-js'
 211         },
 212         {
 213           from: 'src/standalone',
 214           to: 'standalone'
 215         }
 216       ]),
 217
 218       /*
 219        * Plugin: HtmlWebpackPlugin
 220        * Description: Simplifies creation of HTML files to serve your webpack bundles.
 221        * This is especially useful for webpack bundles that include a hash in the filename
 222        * which changes every compilation.
 223        *
 224        * See: https://github.com/ampedandwired/html-webpack-plugin
 225        */
 226       new HtmlWebpackPlugin({
 227         template: 'src/index.html',
 228         title: METADATA.title,
 229         chunksSortMode: 'dependency',
 230         metadata: METADATA
 231       }),
 232
 233       /*
 234       * Plugin: ScriptExtHtmlWebpackPlugin
 235       * Description: Enhances html-webpack-plugin functionality
 236       * with different deployment options for your scripts including:
 237       *
 238       * See: https://github.com/numical/script-ext-html-webpack-plugin
 239       */
 240       new ScriptExtHtmlWebpackPlugin({
 241         sync: [ 'webtorrent.min.js' ],
 242         defaultAttribute: 'defer'
 243       }),
 244
 245       new WebpackNotifierPlugin({ alwaysNotify: true }),
 246
 247       /**
 248       * Plugin LoaderOptionsPlugin (experimental)
 249       *
 250       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
 251       */
 252       new LoaderOptionsPlugin({
 253         options: {
 254           sassLoader: {
 255             precision: 10
 256           }
 257         }
 258       })
 259     ],
 260
 261     /*
 262      * Include polyfills or mocks for various node stuff
 263      * Description: Node configuration
 264      *
 265      * See: https://webpack.github.io/docs/configuration.html#node
 266      */
 267     node: {
 268       global: 'true',
 269       crypto: 'empty',
 270       process: true,
 271       module: false,
 272       clearImmediate: false,
 273       setImmediate: false
 274     }
 275   }
 276 }