From 28e575d8f120c3edc3aafb9c714f394a5cec37f8 Mon Sep 17 00:00:00 2001
From: Gyandeep Singh <gyandeeps@gmail.com>
Date: Sun, 2 Apr 2017 17:12:09 -0500
Subject: [PATCH] Switch to webpack 3, switch babel to chromium 60

---
 .babelrc          |  2 +-
 .gitignore        |  1 +
 package.json      | 10 +++++-----
 webpack.config.js | 41 ++++++++++++++++++++++++-----------------
 4 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/.babelrc b/.babelrc
index af2e4a1f2b0..3f9af4e6d01 100644
--- a/.babelrc
+++ b/.babelrc
@@ -3,7 +3,7 @@
     "react",
     ["env", {
       "targets": {
-        "chrome": 57
+        "chrome": 60
       }
     }]
   ],
diff --git a/.gitignore b/.gitignore
index cb3f03b1767..3c78948b128 100644
--- a/.gitignore
+++ b/.gitignore
@@ -51,6 +51,7 @@ dist-ia32
 win64-dist
 Brave.tar.bz2
 
+app/extensions/gen
 app/extensions/brave/gen
 app/extensions/torrent/gen
 *.pfx
diff --git a/package.json b/package.json
index c6fe0870633..f011a90c389 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "vagrant-rsync-linux": "VAGRANT_CWD=./test/vms/vagrant/ubuntu-14.04 vagrant rsync-auto",
     "vagrant-ssh-linux": "VAGRANT_CWD=./test/vms/vagrant/ubuntu-14.04 vagrant ssh",
     "vagrant-up-linux": "VAGRANT_CWD=./test/vms/vagrant/ubuntu-14.04 vagrant up",
-    "watch": "webpack-dev-server --inline --hot --colors --content-base=./app/extensions/brave",
+    "watch": "webpack-dev-server --color",
     "watch-all": "npm run watch & npm run watch-test",
     "watch-test": "cross-env NODE_ENV=test webpack --watch",
     "webpack": "webpack",
@@ -130,7 +130,7 @@
     "asar": "^0.11.0",
     "babel": "^6.1.18",
     "babel-core": "^6.3.15",
-    "babel-loader": "^6.2.0",
+    "babel-loader": "^7.1.1",
     "babel-plugin-transform-react-constant-elements": "^6.4.0",
     "babel-plugin-transform-react-inline-elements": "^6.4.0",
     "babel-polyfill": "^6.3.14",
@@ -181,11 +181,11 @@
     "spectron": "brave/spectron#chromium60",
     "standard": "9.0.0",
     "style-loader": "^0.13.0",
-    "uglify-js-harmony": "^2.7.5",
+    "uglifyjs-webpack-plugin": "^1.0.0-beta.2",
     "uuid": "^3.0.1",
     "webdriverio": "4.7.1",
-    "webpack": "^1.12.9",
-    "webpack-dev-server": "^1.14.0",
+    "webpack": "~3.4.1",
+    "webpack-dev-server": "~2.6.1",
     "webpack-notifier": "^1.2.1",
     "xml2js": "^0.4.15"
   },
diff --git a/webpack.config.js b/webpack.config.js
index ea2bf8f7376..e5b3b0c3b07 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -14,7 +14,7 @@ function config () {
     devtool: '#source-map',
     cache: true,
     module: {
-      loaders: [
+      rules: [
         {
           test: /\.js?$/,
           exclude: [
@@ -23,7 +23,7 @@ function config () {
             path.resolve(__dirname, 'app', 'browser', '*'),
             path.resolve(__dirname, 'app', 'extensions', '*')
           ],
-          loader: 'babel'
+          loader: 'babel-loader'
         },
         {
           test: /\.less$/,
@@ -33,10 +33,6 @@ function config () {
           test: /\.css$/,
           loader: 'style-loader!css-loader?-minimize'
         },
-        {
-          test: /\.json$/,
-          loader: 'json'
-        },
         // Loads font files for Font Awesome
         {
           test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
@@ -49,7 +45,7 @@ function config () {
       ]
     },
     resolve: {
-      extensions: ['', '.js', '.jsx']
+      extensions: ['.js', '.jsx']
     },
     externals: {
       'electron': 'chrome'
@@ -89,7 +85,11 @@ function watchOptions () {
 
 function development () {  // eslint-disable-line
   var dev = config()
+  dev.plugins.push(new webpack.HotModuleReplacementPlugin())
   dev.devServer = {
+    contentBase: path.resolve(__dirname, 'app', 'extensions', 'brave'),
+    hot: true,
+    inline: true,
     publicPath: 'http://localhost:' + port + '/gen/',
     headers: { 'Access-Control-Allow-Origin': '*' }
   }
@@ -98,15 +98,17 @@ function development () {  // eslint-disable-line
 
 function production () {  // eslint-disable-line
   var prod = config()
-  prod.plugins.push(new webpack.optimize.DedupePlugin())
+  var UglifyJsPlugin = require('uglifyjs-webpack-plugin')
   prod.plugins.push(new webpack.optimize.OccurrenceOrderPlugin(true))
   if (env !== 'test') {
-    prod.plugins.push(new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      },
-      mangle: {
-        except: ['module', 'exports', 'require']
+    prod.plugins.push(new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        },
+        mangle: {
+          reserved: ['module', 'exports', 'require']
+        }
       }
     }))
   }
@@ -117,9 +119,14 @@ function test () {  // eslint-disable-line
   return Object.assign(production(), watchOptions())
 }
 
-function merge (config, env) {
-  var merged = Object.assign({}, env, config)
-  merged.plugins = (config.plugins || []).concat(env.plugins || [])
+function merge (config, envConfig) {
+  var merged = Object.assign({}, envConfig, config)
+  merged.plugins = (config.plugins || []).concat(envConfig.plugins || [])
+  // In development we overwrite the output path so the dev server serves everything from the gen subdir
+  if (env === 'development') {
+    // Note that this directory will never be created since the dev server does not write out to files
+    merged.output.path = path.resolve(__dirname, 'app', 'extensions', 'gen')
+  }
   return merged
 }