client/webpack/webpack.video-embed.js

   1 const helpers = require('./helpers')
   2 const path = require('path')
   3
   4 const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin
   5 const HtmlWebpackPlugin = require('html-webpack-plugin')
   6 const TerserPlugin = require('terser-webpack-plugin')
   7 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
   8 const ExtractTextPlugin = require('extract-text-webpack-plugin')
   9 const PurifyCSSPlugin = require('purifycss-webpack')
  10
  11 module.exports = function () {
  12   const configuration = {
  13     entry: {
  14       'video-embed': './src/standalone/videos/embed.ts',
  15       'player': './src/standalone/player/player.ts',
  16       'test-embed': './src/standalone/videos/test-embed.ts'
  17     },
  18
  19     resolve: {
  20       /*
  21        * An array of extensions that should be used to resolve modules.
  22        *
  23        * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
  24        */
  25       extensions: [ '.ts', '.js', '.json', '.scss' ],
  26
  27       modules: [ helpers.root('src'), helpers.root('node_modules') ],
  28
  29       alias: {
  30         'video.js$': path.resolve('node_modules/video.js/core.js')
  31       }
  32     },
  33
  34     output: {
  35       path: helpers.root('dist/standalone/videos'),
  36
  37       filename: process.env.ANALYZE_BUNDLE === 'true'
  38         ? '[name].bundle.js'
  39         : '[name].[hash].bundle.js',
  40
  41       sourceMapFilename: '[file].map',
  42       chunkFilename: '[id].[hash].chunk.js',
  43       publicPath: '/client/standalone/videos/'
  44     },
  45
  46     devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
  47
  48     module: {
  49
  50       rules: [
  51         {
  52           test: /\.ts$/,
  53           use: [
  54             {
  55               loader: 'awesome-typescript-loader',
  56               options: {
  57                 configFileName: 'tsconfig.json'
  58               }
  59             }
  60           ],
  61           exclude: [/\.(spec|e2e)\.ts$/]
  62         },
  63
  64         {
  65           test: /\.(sass|scss)$/,
  66           use: ExtractTextPlugin.extract({
  67             fallback: 'style-loader',
  68             use: [
  69               {
  70                 loader: 'css-loader',
  71                 options: {
  72                   sourceMap: true,
  73                   importLoaders: 1
  74                 }
  75               },
  76               // {
  77               //   loader: 'resolve-url-loader',
  78               //   options: {
  79               //     debug: true
  80               //   }
  81               // },
  82               {
  83                 loader: 'sass-loader',
  84                 options: {
  85                   sassOptions: {
  86                     sourceMap: true,
  87                     includePaths: [
  88                       helpers.root('src/sass/include')
  89                     ]
  90                   }
  91                 }
  92               }
  93             ]
  94           })
  95         },
  96
  97         {
  98           test: /\.html$/,
  99           use: 'raw-loader',
 100           exclude: [
 101             helpers.root('src/index.html'),
 102             helpers.root('src/standalone/videos/embed.html'),
 103             helpers.root('src/standalone/videos/test-embed.html')
 104           ]
 105         },
 106
 107         {
 108           test: /\.(jpg|png|gif)$/,
 109           use: 'url-loader'
 110         },
 111
 112         { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&minetype=application/font-woff' },
 113         { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'file-loader' }
 114       ]
 115
 116     },
 117
 118     plugins: [
 119       new ExtractTextPlugin({
 120         filename: process.env.ANALYZE_BUNDLE === 'true'
 121           ? '[name].css'
 122           : '[name].[hash].css'
 123       }),
 124
 125       new PurifyCSSPlugin({
 126         paths: [
 127           helpers.root('src/standalone/videos/embed.ts'),
 128           helpers.root('src/standalone/videos/test-embed.html')
 129         ],
 130         purifyOptions: {
 131           minify: true,
 132           whitelist: [ '*vjs*', '*video-js*' ]
 133         }
 134       }),
 135
 136       new CheckerPlugin(),
 137
 138       new HtmlWebpackPlugin({
 139         template: 'src/standalone/videos/embed.html',
 140         filename: 'embed.html',
 141         title: 'PeerTube',
 142         chunksSortMode: 'auto',
 143         inject: 'body',
 144         chunks: ['video-embed']
 145       }),
 146
 147       new HtmlWebpackPlugin({
 148         template: '!!html-loader!src/standalone/videos/test-embed.html',
 149         filename: 'test-embed.html',
 150         title: 'PeerTube',
 151         chunksSortMode: 'auto',
 152         inject: 'body',
 153         chunks: ['test-embed']
 154       }),
 155
 156       /**
 157        * Plugin LoaderOptionsPlugin (experimental)
 158        *
 159        * See: https://gist.github.com/sokra/27b24881210b56bbaff7
 160        */
 161       new LoaderOptionsPlugin({
 162         options: {
 163           context: __dirname,
 164           output: {
 165             path: helpers.root('dist')
 166           }
 167         }
 168       })
 169     ],
 170
 171     optimization: {
 172       minimizer: [
 173         new TerserPlugin({
 174           terserOptions: {
 175             ecma: 6,
 176             warnings: false,
 177             ie8: false,
 178             mangle: true,
 179             compress: {
 180               passes: 3,
 181               pure_getters: true
 182             },
 183             output: {
 184               ascii_only: true,
 185               comments: false
 186             }
 187           }
 188         })
 189       ]
 190     },
 191
 192     performance: {
 193       maxEntrypointSize: 700000, // 600kB
 194       maxAssetSize: 700000
 195     },
 196
 197     node: {
 198       global: true,
 199       crypto: 'empty',
 200       fs: 'empty',
 201       process: true,
 202       module: false,
 203       clearImmediate: false,
 204       setImmediate: false
 205     }
 206   }
 207
 208   return configuration
 209 }