client/webpack/webpack.video-embed.js

   1 const helpers = require('./helpers')
   2 const path = require('path')
   3
   4 const HtmlWebpackPlugin = require('html-webpack-plugin')
   5 const TerserPlugin = require('terser-webpack-plugin')
   6 const ProvidePlugin = require('webpack/lib/ProvidePlugin')
   7 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
   8
   9 module.exports = function () {
  10   const configuration = {
  11     entry: {
  12       'video-embed': './src/standalone/videos/embed.ts',
  13       'player': './src/standalone/player/player.ts',
  14       'test-embed': './src/standalone/videos/test-embed.ts'
  15     },
  16
  17     resolve: {
  18       /*
  19        * An array of extensions that should be used to resolve modules.
  20        *
  21        * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
  22        */
  23       extensions: [ '.ts', '.js', '.json', '.scss' ],
  24
  25       modules: [ helpers.root('src'), 'node_modules' ],
  26
  27       symlinks: true,
  28
  29       alias: {
  30         'video.js$': path.resolve('node_modules/video.js/core.js'),
  31         'hls.js$': path.resolve('node_modules/hls.js/dist/hls.light.js'),
  32         '@root-helpers': path.resolve('src/root-helpers'),
  33         '@shared/models': path.resolve('../shared/models'),
  34         '@shared/core-utils': path.resolve('../shared/core-utils')
  35       },
  36
  37       fallback: {
  38         fs: [ path.resolve('src/shims/noop.ts') ],
  39         http: [ path.resolve('src/shims/http.ts') ],
  40         https: [ path.resolve('src/shims/https.ts') ],
  41         path: [ path.resolve('src/shims/path.ts') ],
  42         stream: [ path.resolve('src/shims/stream.ts') ],
  43         crypto: [ path.resolve('src/shims/noop.ts') ]
  44       }
  45     },
  46
  47     output: {
  48       path: helpers.root('dist/standalone/videos'),
  49
  50       filename: process.env.ANALYZE_BUNDLE === 'true'
  51         ? '[name].bundle.js'
  52         : '[name].[contenthash].bundle.js',
  53
  54       sourceMapFilename: '[file].map',
  55
  56       chunkFilename: process.env.ANALYZE_BUNDLE === 'true'
  57         ? '[name].chunk.js'
  58         : '[id].[contenthash].chunk.js',
  59
  60       publicPath: '/client/standalone/videos/'
  61     },
  62
  63     devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
  64
  65     module: {
  66
  67       rules: [
  68         {
  69           test: /\.ts$/,
  70           use: [
  71             getBabelLoader(),
  72
  73             {
  74               loader: 'ts-loader',
  75               options: {
  76                 configFile: helpers.root('src/standalone/videos/tsconfig.json')
  77               }
  78             }
  79           ]
  80         },
  81         {
  82           test: /\.m?js$/,
  83           use: [ getBabelLoader() ]
  84         },
  85
  86         {
  87           test: /\.(sass|scss)$/,
  88           use: [
  89             MiniCssExtractPlugin.loader,
  90
  91             {
  92               loader: 'css-loader',
  93               options: {
  94                 sourceMap: true,
  95                 importLoaders: 1
  96               }
  97             },
  98
  99             {
 100               loader: 'sass-loader',
 101               options: {
 102                 sassOptions: {
 103                   sourceMap: true,
 104                   includePaths: [
 105                     helpers.root('src/sass/include')
 106                   ]
 107                 }
 108               }
 109             }
 110           ]
 111         },
 112
 113         {
 114           test: /\.html$/,
 115           exclude: [
 116             helpers.root('src/index.html'),
 117             helpers.root('src/standalone/videos/embed.html'),
 118             helpers.root('src/standalone/videos/test-embed.html')
 119           ],
 120           type: 'asset/source'
 121         },
 122
 123         {
 124           test: /\.(jpg|png|gif|svg)$/,
 125           type: 'asset'
 126         },
 127
 128         {
 129           test: /\.(ttf|eot|woff2?)$/,
 130           type: 'asset'
 131         }
 132       ]
 133
 134     },
 135
 136     plugins: [
 137       new ProvidePlugin({
 138         process: 'process/browser',
 139         Buffer: [ 'buffer', 'Buffer' ]
 140       }),
 141
 142       new MiniCssExtractPlugin({
 143         filename: process.env.ANALYZE_BUNDLE === 'true'
 144           ? '[name].css'
 145           : '[name].[contenthash].css'
 146       }),
 147
 148       new HtmlWebpackPlugin({
 149         template: 'src/standalone/videos/embed.html',
 150         filename: 'embed.html',
 151         title: 'PeerTube',
 152         chunksSortMode: 'auto',
 153         inject: 'body',
 154         chunks: [ 'video-embed' ],
 155         minify: {
 156           collapseWhitespace: true,
 157           removeComments: false,
 158           removeRedundantAttributes: true,
 159           removeScriptTypeAttributes: true,
 160           removeStyleLinkTypeAttributes: true,
 161           useShortDoctype: true
 162         }
 163       }),
 164
 165       new HtmlWebpackPlugin({
 166         template: '!!html-loader!src/standalone/videos/test-embed.html',
 167         filename: 'test-embed.html',
 168         title: 'PeerTube',
 169         chunksSortMode: 'auto',
 170         inject: 'body',
 171         chunks: [ 'test-embed' ]
 172       })
 173     ],
 174
 175     optimization: {
 176       minimizer: [
 177         new TerserPlugin({
 178           terserOptions: {
 179             ecma: 6,
 180             warnings: false,
 181             ie8: false,
 182             safari10: false,
 183             mangle: true,
 184             compress: {
 185               passes: 3,
 186               pure_getters: true
 187             },
 188             output: {
 189               ascii_only: true,
 190               comments: false
 191             }
 192           }
 193         })
 194       ]
 195     },
 196
 197     performance: {
 198       maxEntrypointSize: 700000, // 600kB
 199       maxAssetSize: 700000
 200     },
 201
 202     node: {
 203       global: true
 204     }
 205   }
 206
 207   return configuration
 208 }
 209
 210 function getBabelLoader () {
 211   return {
 212     loader: 'babel-loader',
 213     options: {
 214       presets: [
 215         [
 216           '@babel/preset-env', {
 217             targets: 'last 1 Chrome version, last 2 Edge major versions, Firefox ESR, Safari >= 12, ios_saf >= 12'
 218           }
 219         ]
 220       ]
 221     }
 222   }
 223 }