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