client/config/webpack.common.js

   1 const helpers = require('./helpers')
   2
   3 /*
   4  * Webpack Plugins
   5  */
   6
   7 const AssetsPlugin = require('assets-webpack-plugin')
   8 const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin')
   9 const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin')
  10 const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin
  11 const HtmlWebpackPlugin = require('html-webpack-plugin')
  12 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
  13 const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
  14 const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
  15 const ngcWebpack = require('ngc-webpack')
  16 const CopyWebpackPlugin = require('copy-webpack-plugin')
  17
  18 const WebpackNotifierPlugin = require('webpack-notifier')
  19
  20 const HMR = helpers.hasProcessFlag('hot')
  21 const AOT = process.env.BUILD_AOT || helpers.hasNpmFlag('aot')
  22 const METADATA = {
  23   title: 'PeerTube',
  24   baseUrl: '/',
  25   isDevServer: helpers.isWebpackDevServer(),
  26   HMR: HMR,
  27   AOT: AOT
  28 }
  29
  30 /*
  31  * Webpack configuration
  32  *
  33  * See: http://webpack.github.io/docs/configuration.html#cli
  34  */
  35 module.exports = function (options) {
  36   const isProd = options.env === 'production'
  37   const AOT = isProd
  38
  39   return {
  40
  41     /*
  42      * Cache generated modules and chunks to improve performance for multiple incremental builds.
  43      * This is enabled by default in watch mode.
  44      * You can pass false to disable it.
  45      *
  46      * See: http://webpack.github.io/docs/configuration.html#cache
  47      */
  48     // cache: false,
  49
  50     /*
  51      * The entry point for the bundle
  52      * Our Angular.js app
  53      *
  54      * See: http://webpack.github.io/docs/configuration.html#entry
  55      */
  56     entry: {
  57       'polyfills': './src/polyfills.browser.ts',
  58       'main': AOT
  59               ? './src/main.browser.aot.ts'
  60               : './src/main.browser.ts'
  61     },
  62
  63     /*
  64      * Options affecting the resolving of modules.
  65      *
  66      * See: http://webpack.github.io/docs/configuration.html#resolve
  67      */
  68     resolve: {
  69       /*
  70        * An array of extensions that should be used to resolve modules.
  71        *
  72        * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
  73        */
  74       extensions: [ '.ts', '.js', '.json', '.scss' ],
  75
  76       modules: [ helpers.root('src'), helpers.root('node_modules') ]
  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       rules: [
  87
  88         /*
  89          * Typescript loader support for .ts and Angular async routes via .async.ts
  90          *
  91          * See: https://github.com/s-panferov/awesome-typescript-loader
  92          */
  93         {
  94           test: /\.ts$/,
  95           use: [
  96             {
  97               loader: 'ng-router-loader',
  98               options: {
  99                 loader: 'async-import',
 100                 genDir: 'compiled',
 101                 aot: AOT
 102               }
 103             },
 104             {
 105               loader: 'awesome-typescript-loader',
 106               options: {
 107                 configFileName: 'tsconfig.webpack.json',
 108                 useCache: !isProd
 109               }
 110             },
 111             {
 112               loader: 'angular2-template-loader'
 113             }
 114           ],
 115           exclude: [/\.(spec|e2e)\.ts$/]
 116         },
 117
 118         /*
 119          * Json loader support for *.json files.
 120          *
 121          * See: https://github.com/webpack/json-loader
 122          */
 123         {
 124           test: /\.json$/,
 125           use: 'json-loader'
 126         },
 127
 128         {
 129           test: /\.(sass|scss)$/,
 130           use: [
 131             'css-to-string-loader',
 132             {
 133               loader: 'css-loader',
 134               options: {
 135                 sourceMap: true,
 136                 importLoaders: 1
 137               }
 138             },
 139             'resolve-url-loader',
 140             {
 141               loader: 'sass-loader',
 142               options: {
 143                 sourceMap: true
 144               }
 145             },
 146             {
 147               loader: 'sass-resources-loader',
 148               options: {
 149                 resources: [
 150                   helpers.root('src/sass/_variables.scss'),
 151                   helpers.root('src/sass/_mixins.scss')
 152                 ]
 153               }
 154             }
 155           ]
 156         },
 157         { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&minetype=application/font-woff' },
 158         { test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000' },
 159
 160         /* Raw loader support for *.html
 161          * Returns file content as string
 162          *
 163          * See: https://github.com/webpack/raw-loader
 164          */
 165         {
 166           test: /\.html$/,
 167           use: 'raw-loader',
 168           exclude: [
 169             helpers.root('src/index.html'),
 170             helpers.root('src/standalone/videos/embed.html')
 171           ]
 172         },
 173
 174         /* File loader for supporting images, for example, in CSS files.
 175          */
 176         {
 177           test: /\.(jpg|png|gif)$/,
 178           use: 'url-loader'
 179         }
 180
 181       ]
 182
 183     },
 184
 185     /*
 186      * Add additional plugins to the compiler.
 187      *
 188      * See: http://webpack.github.io/docs/configuration.html#plugins
 189      */
 190     plugins: [
 191       new AssetsPlugin({
 192         path: helpers.root('dist'),
 193         filename: 'webpack-assets.json',
 194         prettyPrint: true
 195       }),
 196
 197       /*
 198        * Plugin: ForkCheckerPlugin
 199        * Description: Do type checking in a separate process, so webpack don't need to wait.
 200        *
 201        * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
 202        */
 203       new CheckerPlugin(),
 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 CommonsChunkPlugin({
 214         name: 'polyfills',
 215         chunks: ['polyfills']
 216       }),
 217
 218       // This enables tree shaking of the vendor modules
 219       new CommonsChunkPlugin({
 220         name: 'vendor',
 221         chunks: ['main'],
 222         minChunks: module => {
 223           return /node_modules\//.test(module.resource)
 224         }
 225       }),
 226
 227       // Specify the correct order the scripts will be injected in
 228       new CommonsChunkPlugin({
 229         name: ['polyfills', 'vendor'].reverse()
 230       }),
 231
 232       /**
 233        * Plugin: ContextReplacementPlugin
 234        * Description: Provides context to Angular's use of System.import
 235        *
 236        * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
 237        * See: https://github.com/angular/angular/issues/11580
 238        */
 239       new ContextReplacementPlugin(
 240         /**
 241          * The (\\|\/) piece accounts for path separators in *nix and Windows
 242          */
 243         /(.+)?angular(\\|\/)core(.+)?/,
 244         helpers.root('src'), // location of your src
 245         {
 246           /**
 247            * Your Angular Async Route paths relative to this root directory
 248            */
 249         }
 250       ),
 251
 252       /*
 253        * Plugin: HtmlWebpackPlugin
 254        * Description: Simplifies creation of HTML files to serve your webpack bundles.
 255        * This is especially useful for webpack bundles that include a hash in the filename
 256        * which changes every compilation.
 257        *
 258        * See: https://github.com/ampedandwired/html-webpack-plugin
 259        */
 260       new HtmlWebpackPlugin({
 261         template: 'src/index.html',
 262         title: METADATA.title,
 263         chunksSortMode: function (a, b) {
 264           const entryPoints = [ 'inline', 'polyfills', 'sw-register', 'styles', 'vendor', 'main' ]
 265           return entryPoints.indexOf(a.names[0]) - entryPoints.indexOf(b.names[0])
 266         },
 267         metadata: METADATA,
 268         inject: 'body'
 269       }),
 270
 271       new CopyWebpackPlugin([
 272         {
 273           from: helpers.root('src/assets/images/favicon.png'),
 274           to: 'assets/images/favicon.png'
 275         },
 276         {
 277           from: helpers.root('src/assets/images/default-avatar.png'),
 278           to: 'assets/images/default-avatar.png'
 279         }
 280       ]),
 281
 282       /*
 283        * Plugin: ScriptExtHtmlWebpackPlugin
 284        * Description: Enhances html-webpack-plugin functionality
 285        * with different deployment options for your scripts including:
 286        *
 287        * See: https://github.com/numical/script-ext-html-webpack-plugin
 288        */
 289       new ScriptExtHtmlWebpackPlugin({
 290         sync: [ /polyfill|vendor/ ],
 291         defaultAttribute: 'async',
 292         preload: [/polyfill|vendor|main/],
 293         prefetch: [/chunk/]
 294       }),
 295
 296       new WebpackNotifierPlugin({ alwaysNotify: true }),
 297
 298       /**
 299       * Plugin LoaderOptionsPlugin (experimental)
 300       *
 301       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
 302       */
 303       new LoaderOptionsPlugin({
 304         options: {
 305           context: '',
 306           sassLoader: {
 307             precision: 10,
 308             includePaths: [ helpers.root('src/sass') ]
 309           }
 310         }
 311       }),
 312
 313       new ngcWebpack.NgcWebpackPlugin({
 314         disabled: !AOT,
 315         tsConfig: helpers.root('tsconfig.webpack.json')
 316       }),
 317
 318       new InlineManifestWebpackPlugin()
 319     ],
 320
 321     /*
 322      * Include polyfills or mocks for various node stuff
 323      * Description: Node configuration
 324      *
 325      * See: https://webpack.github.io/docs/configuration.html#node
 326      */
 327     node: {
 328       global: true,
 329       crypto: 'empty',
 330       process: true,
 331       module: false,
 332       clearImmediate: false,
 333       setImmediate: false,
 334       setInterval: false,
 335       setTimeout: false
 336     }
 337   }
 338 }