Switch from Browserify to Webpack

1. The minimized versions of the library lib-jitsi-meet i.e. the file
   lib-jitsi-meet.js with the default configurations of Browserify and
   Webpack are, respectively, 614KB and 424KB. That's a reduction in
   file size of approximately 30%. While such a reduction may be
   achieved with Browserify, such a configuration would be non-default
   i.e. it would be more complex.

2. The build process of the library lib-jitsi-meet with Browserify is
   split into three distinct steps by package.json: transpile, version,
   and minimize. The transpile step produces a .js file and a source map
   which get consumed by the minimize step (as input files). A possible
   problem appears during the version step which modifies the .js file
   without modifying the respective source map. Thus, there is a risk
   that the source map of the minimized version of the library
   lib-jitsi-meet is broken. The Webpack approach carries out the
   version step in a way that precludes the possible breaking of the
   source map.

3. The introduction of ES2015 forced us to split the Babel-related parts
   of the build process out of package.json into start_browserify.js. As
   may be seen by comparing start_browserify.js and webpack.config.js,
   there are similarities. The advantage of Webpack is that the other
   parts of the build process are inside webpack.config.js as well. In
   other words, there is no split in the build process and there is less
   complexity.

.babelrc

+{
+    "presets": [
+        "es2015"
+    ]
+}

package.json

   "description": "JS library for accessing Jitsi server side deployments",
   "repository": {
     "type": "git",
-    "url": "git://github.com/jitsi/jitsi-meet"
+    "url": "git://github.com/jitsi/lib-jitsi-meet"
   },
   "keywords": [
     "jingle",
   "author": "",
   "readmeFilename": "README.md",
   "dependencies": {
+    "async": "0.9.0",
+    "current-executing-script": "*",
     "events": "*",
+    "jitsi-meet-logger": "jitsi/jitsi-meet-logger",
+    "jssha": "1.5.0",
     "pako": "*",
+    "retry": "0.6.1",
     "sdp-interop": "0.1.11",
-    "sdp-transform": "1.5.*",
     "sdp-simulcast": "0.1.7",
-    "async": "0.9.0",
-    "retry": "0.6.1",
-    "jssha": "1.5.0",
-    "jitsi-meet-logger": "git+https://github.com/jitsi/jitsi-meet-logger.git",
-    "strophe": "^1.2.2",
-    "strophejs-plugins": "^0.0.6",
+    "sdp-transform": "1.5.*",
     "socket.io-client": "1.3.6",
-    "current-executing-script": "*"
+    "strophe": "^1.2.2",
+    "strophejs-plugins": "^0.0.6"
   },
   "devDependencies": {
-    "babelify": "*",
-    "babel-preset-es2015": "*",
+    "babel-core": "*",
+    "babel-loader": "*",
     "babel-polyfill": "*",
-    "browserify": "11.1.x",
+    "babel-preset-es2015": "*",
+    "babel-register": "*",
     "jshint": "^2.8.0",
     "precommit-hook": "^3.0.0",
-    "exorcist": "*",
-    "uglify-js": "2.4.24",
-    "watchify": "^3.7.0"
+    "string-replace-loader": "*",
+    "webpack": "*"
   },
   "scripts": {
-    "install": "npm run browserify && npm run version && npm run uglifyjs",
-    "browserify": "node ./start_browserify.js | exorcist lib-jitsi-meet.js.map > lib-jitsi-meet.js && [ -s lib-jitsi-meet.js ]",
-    "version": "VERSION=`./get-version.sh` && echo lib-jitsi-meet version is:${VERSION} && sed -i'' -e s/{#COMMIT_HASH#}/${VERSION}/g lib-jitsi-meet.js",
-    "uglifyjs": "uglifyjs -p relative lib-jitsi-meet.js -o lib-jitsi-meet.min.js --source-map lib-jitsi-meet.min.map --in-source-map lib-jitsi-meet.js.map",
-    "watch": "watchify JitsiMeetJS.js -s JitsiMeetJS -o lib-jitsi-meet.js -v",
+    "install": "webpack && webpack -p",
     "lint": "jshint .",
     "validate": "npm ls"
   },

start_browserify.js

-var browserify = require("browserify");
-var babelify = require("babelify");
-
-browserify("./JitsiMeetJS.js", {
-    debug: true,
-    standalone: "JitsiMeetJS"
-}).transform(babelify.configure({
-  ignore: [
-      /\/node_modules\/(?!lib-jitsi-meet\/)/,
-      "modules/RTC/adapter.screenshare.js"],
-  presets: ["es2015"]
-})).bundle().pipe(process.stdout);

webpack.config.babel.js

+/* global __dirname */
+
+import child_process from 'child_process'; // eslint-disable-line camelcase
+import path from 'path';
+import process from 'process';
+
+const minimize
+    = process.argv.indexOf('-p') !== -1
+        || process.argv.indexOf('--optimize-minimize') !== -1;
+
+export default {
+    devtool: 'source-map',
+    entry: {
+        'lib-jitsi-meet': './JitsiMeetJS.js'
+    },
+    module: {
+        loaders: [ {
+            // Version this build of the lib-jitsi-meet library.
+
+            include: path.resolve(__dirname, './JitsiMeetJS.js'),
+            loader: 'string-replace',
+            query: {
+                flags: 'g',
+                replace:
+                    child_process.execSync( // eslint-disable-line camelcase
+                            path.resolve(__dirname, './get-version.sh'))
+
+                        // The type of the return value of
+                        // child_process.execSync is either Buffer or String.
+                        .toString()
+
+                            // Shells may automatically append CR and/or LF
+                            // characters to the output.
+                            .trim(),
+                search: '{#COMMIT_HASH#}'
+            },
+            test: /\.js$/
+        }, {
+            // Transpile ES2015 (aka ES6) to ES5.
+
+            exclude: [
+                path.resolve(__dirname, './modules/RTC/adapter.screenshare.js'),
+                path.resolve(__dirname, './node_modules/')
+            ],
+            loader: 'babel',
+            test: /\.js$/
+        } ]
+    },
+    node: {
+        // Allow the use of the real filename of the module being executed. By
+        // default Webpack does not leak path-related information and provides a
+        // value that is a mock (/index.js).
+        __filename: true
+    },
+    output: {
+        filename: `[name]${minimize ? '.min' : ''}.js`,
+        library: 'JitsiMeetJS',
+        libraryTarget: 'umd',
+        sourceMapFilename: `[name].${minimize ? 'min' : 'js'}.map`
+    }
+};