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