Upgrade scripts and embed webpack config

2 files changed, 200 insertions, 0 deletions

diff --git a/client/webpack/helpers.js b/client/webpack/helpers.js
new file mode 100644
index 000000000..ca5923472
--- /dev/null
+++ b/client/webpack/helpers.js
@@ -0,0 +1,27 @@
+const path = require('path')
+
+// Helper functions
+const ROOT = path.resolve(__dirname, '..')
+const EVENT = process.env.npm_lifecycle_event || ''
+
+function hasProcessFlag (flag) {
+  return process.argv.join('').indexOf(flag) > -1
+}
+
+function hasNpmFlag (flag) {
+  return EVENT.includes(flag)
+}
+
+function isWebpackDevServer () {
+  return process.argv[1] && !!(/webpack-dev-server$/.exec(process.argv[1]))
+}
+
+function root (args) {
+  args = Array.prototype.slice.call(arguments, 0)
+  return path.join.apply(path, [ROOT].concat(args))
+}
+
+exports.hasProcessFlag = hasProcessFlag
+exports.hasNpmFlag = hasNpmFlag
+exports.isWebpackDevServer = isWebpackDevServer
+exports.root = root
diff --git a/client/webpack/webpack.video-embed.js b/client/webpack/webpack.video-embed.js
new file mode 100644
index 000000000..b51808dc2
--- /dev/null
+++ b/client/webpack/webpack.video-embed.js
@@ -0,0 +1,173 @@
+const helpers = require('./helpers')
+
+const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin')
+const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const PurifyCSSPlugin = require('purifycss-webpack')
+
+module.exports = function () {
+  const isProd = process.env.NODE_ENV === 'production'
+
+  const configuration = {
+    entry: {
+      'video-embed': './src/standalone/videos/embed.ts'
+    },
+
+    resolve: {
+      /*
+       * An array of extensions that should be used to resolve modules.
+       *
+       * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
+       */
+      extensions: [ '.ts', '.js', '.json', '.scss' ],
+
+      modules: [ helpers.root('src'), helpers.root('node_modules') ]
+    },
+
+    output: {
+      path: helpers.root('dist/standalone/videos'),
+      filename: '[name].[hash].bundle.js',
+      sourceMapFilename: '[file].map',
+      chunkFilename: '[id].chunk.js',
+      publicPath: '/client/standalone/videos/'
+    },
+
+    module: {
+
+      rules: [
+        {
+          test: /\.ts$/,
+          use: [
+            {
+              loader: 'awesome-typescript-loader',
+              options: {
+                configFileName: 'tsconfig.json'
+              }
+            }
+          ],
+          exclude: [/\.(spec|e2e)\.ts$/]
+        },
+
+        {
+          test: /\.(sass|scss)$/,
+          use: ExtractTextPlugin.extract({
+            fallback: 'style-loader',
+            use: [
+              {
+                loader: 'css-loader',
+                options: {
+                  sourceMap: true,
+                  importLoaders: 1
+                }
+              },
+              'resolve-url-loader',
+              {
+                loader: 'sass-loader',
+                options: {
+                  sourceMap: true,
+                  includePaths: [
+                    helpers.root('src/sass/include')
+                  ]
+                }
+              }
+            ]
+          })
+        },
+
+        {
+          test: /\.html$/,
+          use: 'raw-loader',
+          exclude: [
+            helpers.root('src/index.html'),
+            helpers.root('src/standalone/videos/embed.html')
+          ]
+        },
+
+        {
+          test: /\.(jpg|png|gif)$/,
+          use: 'url-loader'
+        },
+
+        { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&minetype=application/font-woff' },
+        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'file-loader' }
+      ]
+
+    },
+
+    plugins: [
+      new ExtractTextPlugin({
+        filename: '[name].[contenthash].css'
+      }),
+
+      new PurifyCSSPlugin({
+        paths: [ helpers.root('src/standalone/videos/embed.ts') ],
+        purifyOptions: {
+          minify: true,
+          whitelist: [ '*vjs*', '*video-js*' ]
+        }
+      }),
+
+      new CheckerPlugin(),
+
+      new HtmlWebpackPlugin({
+        template: 'src/standalone/videos/embed.html',
+        filename: 'embed.html',
+        title: 'PeerTube',
+        chunksSortMode: 'dependency',
+        inject: 'body'
+      }),
+
+      /**
+       * Plugin LoaderOptionsPlugin (experimental)
+       *
+       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
+       */
+      new LoaderOptionsPlugin({
+        options: {
+          context: __dirname,
+          output: {
+            path: helpers.root('dist')
+          }
+        }
+      })
+    ],
+
+    node: {
+      global: true,
+      crypto: 'empty',
+      fs: 'empty',
+      process: true,
+      module: false,
+      clearImmediate: false,
+      setImmediate: false
+    }
+  }
+
+  if (isProd) {
+    configuration.plugins.push(
+      new UglifyJsPlugin({
+        uglifyOptions: {
+          ecma: 6,
+          warnings: false,
+          ie8: false,
+          mangle: true,
+          compress: {
+            passes: 3,
+            pure_getters: true
+          },
+          output: {
+            ascii_only: true,
+            comments: false
+          }
+        }
+      }),
+
+      new HashedModuleIdsPlugin()
+    )
+  }
+
+  return configuration
+}