Upgrade webpack to v2 and other deps (#8491)

* update to webpack2 and other deps

* fix linting

package.json

@@ -4,11 +4,11 @@
   "version": "3.75.3",
   "main": "./website/server/index.js",
   "dependencies": {
-    "@slack/client": "3.6.0",
+    "@slack/client": "^3.8.1",
     "accepts": "^1.3.2",
     "amazon-payments": "0.0.4",
     "amplitude": "^2.0.3",
-    "apidoc": "^0.16.0",
+    "apidoc": "^0.17.5",
     "apn": "^1.7.6",
     "async": "^1.5.0",
     "autoprefixer": "^6.4.0",
@@ -34,7 +34,7 @@
     "connect-ratelimit": "0.0.7",
     "cookie-session": "^1.2.0",
     "coupon-code": "^0.4.5",
-    "css-loader": "^0.23.1",
+    "css-loader": "^0.26.1",
     "csv-stringify": "^1.0.2",
     "cwait": "^1.0.0",
     "domain-middleware": "~0.1.0",
@@ -42,8 +42,8 @@
     "express": "~4.14.0",
     "express-csv": "~0.6.0",
     "express-validator": "^2.18.0",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
-    "file-loader": "^0.8.4",
+    "file-loader": "^0.10.0",
     "glob": "^4.3.5",
     "got": "^6.1.1",
     "grunt": "~0.4.1",
@@ -68,9 +68,8 @@
     "image-size": "~0.3.2",
     "in-app-purchase": "^1.1.6",
     "jade": "~1.11.0",
-    "jquery": "https://registry.npmjs.org/jquery/-/jquery-3.1.1.tgz",
+    "jquery": "^3.1.1",
     "js2xmlparser": "~1.0.0",
-    "json-loader": "^0.5.4",
     "less": "^2.7.1",
     "less-loader": "^2.2.3",
     "lodash": "^3.10.1",
@@ -87,17 +86,17 @@
     "node-gcm": "^0.14.4",
     "nodemailer": "^2.3.2",
     "object-path": "^0.9.2",
-    "ora": "^0.2.0",
+    "ora": "^1.1.0",
     "pageres": "^4.1.1",
     "passport": "^0.3.2",
     "passport-facebook": "^2.0.0",
     "passport-google-oauth20": "1.0.0",
     "paypal-ipn": "3.0.0",
     "paypal-rest-sdk": "^1.2.1",
-    "postcss-easy-import": "^1.0.1",
+    "postcss-easy-import": "^2.0.0",
     "pretty-data": "^0.40.0",
     "ps-tree": "^1.0.0",
-    "pug": "^2.0.0-beta6",
+    "pug": "^2.0.0-beta11",
     "push-notify": "habitrpg/push-notify#v1.2.0",
     "pusher": "^1.3.0",
     "request": "~2.74.0",
@@ -106,23 +105,23 @@
     "s3-upload-stream": "^1.0.6",
     "semantic-ui-less": "~2.2.4",
     "serve-favicon": "^2.3.0",
-    "shelljs": "^0.6.0",
+    "shelljs": "^0.7.6",
     "stripe": "^4.2.0",
-    "superagent": "^1.8.3",
+    "superagent": "^3.4.3",
     "universal-analytics": "~0.3.2",
     "url-loader": "^0.5.7",
-    "useragent": "2.1.9",
+    "useragent": "^2.1.9",
-    "uuid": "^2.0.1",
+    "uuid": "^3.0.1",
     "validator": "^4.9.0",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
     "vue": "^2.1.0",
-    "vue-hot-reload-api": "^1.2.0",
+    "vue-loader": "^11.0.0",
-    "vue-loader": "^10.0.0",
     "vue-router": "^2.0.0-rc.5",
-    "vue-template-compiler": "^2.1.0",
+    "vue-style-loader": "^2.0.0",
-    "webpack": "^1.12.2",
+    "vue-template-compiler": "^2.1.10",
-    "webpack-merge": "^0.8.3",
+    "webpack": "^2.2.1",
+    "webpack-merge": "^2.6.1",
     "winston": "^2.1.0",
     "xml2js": "^0.4.4"
   },
@@ -152,36 +151,37 @@
     "sprites": "gulp sprites:compile",
     "client:dev": "node webpack/dev-server.js",
     "client:build": "node webpack/build.js",
-    "client:unit": "karma start test/client/unit/karma.conf.js --single-run",
+    "client:unit": "cross-env NODE_ENV=test karma start test/client/unit/karma.conf.js --single-run",
-    "client:unit:watch": "karma start test/client/unit/karma.conf.js",
+    "client:unit:watch": "cross-env NODE_ENV=test karma start test/client/unit/karma.conf.js",
     "client:e2e": "node test/client/e2e/runner.js",
     "client:test": "npm run client:unit && npm run client:e2e",
     "start": "gulp run:dev",
     "postinstall": "bower --config.interactive=false install -f; gulp build; npm run client:build"
   },
   "devDependencies": {
+    "babel-plugin-istanbul": "^4.0.0",
     "chai": "^3.4.0",
     "chai-as-promised": "^5.1.0",
     "chalk": "^1.1.3",
-    "chromedriver": "^2.21.2",
+    "chromedriver": "^2.27.2",
     "connect-history-api-fallback": "^1.1.0",
     "coveralls": "^2.11.2",
-    "cross-spawn": "^2.1.5",
+    "cross-env": "^3.1.4",
+    "cross-spawn": "^5.0.1",
     "csv": "~0.3.6",
     "deep-diff": "~0.1.4",
     "eslint": "^3.0.0",
     "eslint-config-habitrpg": "^2.0.0",
     "eslint-friendly-formatter": "^2.0.5",
     "eslint-loader": "^1.3.0",
-    "eslint-plugin-html": "^1.3.0",
+    "eslint-plugin-html": "^2.0.0",
     "eslint-plugin-mocha": "^4.7.0",
     "event-stream": "^3.2.2",
     "eventsource-polyfill": "^0.9.6",
     "expect.js": "~0.2.0",
     "grunt-karma": "~0.12.1",
-    "http-proxy-middleware": "^0.12.0",
+    "http-proxy-middleware": "^0.17.0",
-    "inject-loader": "^2.0.1",
+    "inject-loader": "^3.0.0-beta4",
-    "isparta-loader": "^2.0.0",
     "istanbul": "^0.3.14",
     "karma": "^1.3.0",
     "karma-babel-preprocessor": "^6.0.1",
@@ -193,25 +193,26 @@
     "karma-sinon-chai": "^1.2.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.24",
-    "karma-webpack": "^1.7.0",
+    "karma-webpack": "^2.0.2",
     "lcov-result-merger": "^1.0.2",
     "lolex": "^1.4.0",
     "mocha": "^2.3.3",
     "mongodb": "^2.0.46",
     "mongoskin": "~2.1.0",
-    "monk": "^3.1.3",
+    "monk": "^4.0.0",
-    "nightwatch": "^0.8.18",
+    "nightwatch": "^0.9.12",
     "phantomjs-prebuilt": "^2.1.12",
     "protractor": "^3.1.1",
     "require-again": "^2.0.0",
     "rewire": "^2.3.3",
-    "selenium-server": "2.53.0",
+    "selenium-server": "^3.0.1",
     "sinon": "^1.17.2",
     "sinon-chai": "^2.8.0",
     "sinon-stub-promise": "^4.0.0",
     "superagent-defaults": "^0.1.13",
     "vinyl-transform": "^1.0.0",
-    "webpack-dev-middleware": "^1.4.0",
+    "webpack-bundle-analyzer": "^2.2.1",
-    "webpack-hot-middleware": "^2.6.0"
+    "webpack-dev-middleware": "^1.10.0",
+    "webpack-hot-middleware": "^2.6.1"
   }
 }

test/client/.babelrc

@@ -1,9 +1,18 @@
 {
-  "presets": ["es2015"],
+  "env": {
+    "test": {
+      plugins: [
+        ["istanbul"],
+      ],
+    },
+  },
+  "presets": [
+    ["es2015", { modules: false }],
+  ],
   "plugins": [
     "transform-object-rest-spread",
     "syntax-async-functions",
     "transform-regenerator",
   ],
-  "comments": false
+  "comments": false,
 }

test/client/e2e/nightwatch.conf.js

@@ -3,6 +3,7 @@
 require('babel-register');
 const config = require('../../../webpack/config');
 const chromeDriverPath = require('chromedriver').path;
+const seleniumServerPath = require('selenium-server').path;
 
 // http://nightwatchjs.org/guide#settings-file
 module.exports = {
@@ -12,7 +13,7 @@ module.exports = {
 
   selenium: {
     start_process: true,
-    server_path: 'node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.0.jar',
+    server_path: seleniumServerPath,
     host: '127.0.0.1',
     port: 4444,
     cli_args: {

test/client/unit/karma.conf.js

@@ -3,53 +3,12 @@
 // we are also using it with karma-webpack
 //   https://github.com/webpack/karma-webpack
 
-const path = require('path');
+// Necessary for babel to respect the env version of .babelrc which is necessary
-const merge = require('webpack-merge');
+// Because inject-loader does not work with ["es2015", { modules: false }] that we use
-const baseConfig = require('../../../webpack/webpack.base.conf');
+// in order to let webpack2 handle the imports
-const utils = require('../../../webpack/utils');
-const webpack = require('webpack');
-const projectRoot = path.resolve(__dirname, '../../../');
-const testEnv = require('../../../webpack/config/test.env');
 
-const webpackConfig = merge(baseConfig, {
+process.env.BABEL_ENV = process.env.NODE_ENV; // eslint-disable-line no-process-env
-  // use inline sourcemap for karma-sourcemap-loader
+const webpackConfig = require('../../../webpack/webpack.test.conf');
-  module: {
-    loaders: utils.styleLoaders(),
-  },
-  devtool: '#inline-source-map',
-  vue: {
-    loaders: {
-      js: 'isparta',
-    },
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': testEnv,
-    }),
-  ],
-});
-
-// no need for app entry during tests
-delete webpackConfig.entry;
-
-// make sure isparta loader is applied before eslint
-webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || [];
-webpackConfig.module.preLoaders.unshift({
-  test: /\.js$/,
-  loader: 'isparta',
-  include: [
-    path.resolve(projectRoot, 'website/client'),
-    path.resolve(projectRoot, 'website/common'),
-  ],
-});
-
-// only apply babel for test files when using isparta
-webpackConfig.module.loaders.some((loader) => {
-  if (loader.loader === 'babel') {
-    loader.include = path.resolve(projectRoot, 'test/client/unit');
-    return true;
-  }
-});
 
 module.exports = function (config) {
   config.set({

test/client/unit/specs/store.spec.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import storeInjector from 'inject?-vue!client/store';
+import storeInjector from 'inject-loader?-vue!client/store';
 import { mapState, mapGetters, mapActions } from 'client/store';
 import { flattenAndNamespace } from 'client/store/helpers/internals';
 

webpack/config/index.js

@@ -19,10 +19,16 @@ module.exports = {
     // npm install --save-dev compression-webpack-plugin
     productionGzip: false,
     productionGzipExtensions: ['js', 'css'],
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report, // eslint-disable-line no-process-env
   },
   dev: {
     env: devEnv,
     port: 8080,
+    autoOpenBrowser: true,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     staticAssetsDirectory,

webpack/config/test.env.js

@@ -2,5 +2,5 @@ const merge = require('webpack-merge');
 const devEnv = require('./dev.env');
 
 module.exports = merge(devEnv, {
-  NODE_ENV: '"testing"',
+  NODE_ENV: '"test"',
 });

webpack/dev-server.js

@@ -4,8 +4,13 @@ const path = require('path');
 const express = require('express');
 const webpack = require('webpack');
 const config = require('./config');
+
+if (!process.env.NODE_ENV) {
+  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV);
+}
+
 const proxyMiddleware = require('http-proxy-middleware');
-const webpackConfig = process.env.NODE_ENV === 'testing' ?
+const webpackConfig = process.env.NODE_ENV === 'test' ?
   require('./webpack.prod.conf') :
   require('./webpack.dev.conf');
 
@@ -41,7 +46,7 @@ Object.keys(proxyTable).forEach((context) => {
   if (typeof options === 'string') {
     options = { target: options };
   }
-  app.use(proxyMiddleware(context, options));
+  app.use(proxyMiddleware(options.filter || context, options));
 });
 
 // handle fallback for HTML5 history API

webpack/utils.js

@@ -11,7 +11,7 @@ exports.assetsPath = (_path) => {
   return path.posix.join(assetsSubDirectory, _path);
 };
 
-exports.cssLoaders = (options) => {
+exports.cssLoaders = function cssLoaders (options) {
   options = options || {};
   // generate loader string to be used with extract text plugin
   function generateLoaders (loaders) {
@@ -24,17 +24,22 @@ exports.cssLoaders = (options) => {
         loader = `${loader}-loader`;
         extraParamChar = '?';
       }
-      return `${loader}${(options.sourceMap ? extraParamChar + 'sourceMap' : '')}`; // eslint-disable-line prefer-template
+      return loader + (options.sourceMap ? `${extraParamChar}sourceMap` : '');
     }).join('!');
 
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
     if (options.extract) {
-      return ExtractTextPlugin.extract('vue-style-loader', sourceLoader);
+      return ExtractTextPlugin.extract({
+        use: sourceLoader,
+        fallback: 'vue-style-loader',
+      });
     } else {
       return ['vue-style-loader', sourceLoader].join('!');
     }
   }
 
-  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
+  // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
   return {
     css: generateLoaders(['css']),
     postcss: generateLoaders(['css']),

webpack/webpack.base.conf.js

@@ -19,8 +19,12 @@ const baseConfig = {
     filename: '[name].js',
   },
   resolve: {
-    extensions: ['', '.js', '.vue'],
+    extensions: ['*', '.js', '.vue', '.json'],
-    fallback: [path.join(__dirname, '../node_modules')],
+    modules: [
+      path.join(__dirname, '..', 'website'),
+      path.join(__dirname, '..', 'test/client/unit'),
+      path.join(__dirname, '..', 'node_modules'),
+    ],
     alias: {
       jquery: 'jquery/src/jquery',
       website: path.resolve(__dirname, '../website'),
@@ -30,9 +34,6 @@ const baseConfig = {
       components: path.resolve(__dirname, '../website/client/components'),
     },
   },
-  resolveLoader: {
-    fallback: [path.join(__dirname, '../node_modules')],
-  },
   plugins: [
     new webpack.ProvidePlugin({
       $: 'jquery',
@@ -40,38 +41,34 @@ const baseConfig = {
     }),
   ],
   module: {
-    preLoaders: !IS_PROD ? [
+    rules: [
       {
         test: /\.vue$/,
-        loader: 'eslint',
+        loader: 'vue-loader',
-        include: projectRoot,
+        options: {
-        exclude: /node_modules/,
+          loaders: utils.cssLoaders({
+            sourceMap: IS_PROD ?
+              config.build.productionSourceMap :
+              config.dev.cssSourceMap,
+            extract: IS_PROD,
+          }),
+          postcss: [
+            autoprefixer({
+              browsers: ['last 2 versions'],
+            }),
+            postcssEasyImport(),
+          ],
+        },
       },
       {
         test: /\.js$/,
-        loader: 'eslint',
+        loader: 'babel-loader',
         include: projectRoot,
         exclude: /node_modules/,
       },
-    ] : [],
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue',
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel',
-        include: projectRoot,
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.json$/,
-        loader: 'json',
-      },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url',
+        loader: 'url-loader',
         query: {
           limit: 10000,
           name: utils.assetsPath('img/[name].[hash:7].[ext]'),
@@ -79,7 +76,7 @@ const baseConfig = {
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url',
+        loader: 'url-loader',
         query: {
           limit: 10000,
           name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
@@ -87,25 +84,21 @@ const baseConfig = {
       },
     ],
   },
-  vue: {
-    loaders: utils.cssLoaders(),
-    postcss: [
-      autoprefixer({
-        browsers: ['last 2 versions'],
-      }),
-      postcssEasyImport({
-        glob: true,
-      }),
-    ],
-  },
 };
 
 if (!IS_PROD) {
   const eslintFriendlyFormatter = require('eslint-friendly-formatter'); // eslint-disable-line global-require
 
-  baseConfig.eslint = {
+  baseConfig.module.rules.unshift({
+    test: /\.(js|vue)$/,
+    loader: 'eslint-loader',
+    enforce: 'pre',
+    include: projectRoot,
+    options: {
       formatter: eslintFriendlyFormatter,
       emitWarning: true,
-  };
+    },
+    exclude: /node_modules/,
+  });
 }
 module.exports = baseConfig;

webpack/webpack.dev.conf.js

@@ -12,16 +12,15 @@ Object.keys(baseWebpackConfig.entry).forEach((name) => {
 
 module.exports = merge(baseWebpackConfig, {
   module: {
-    loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }),
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }),
   },
-  // eval-source-map is faster for development
+  // cheap-module-eval-source-map is faster for development
-  devtool: '#eval-source-map',
+  devtool: '#cheap-module-eval-source-map',
   plugins: [
     new webpack.DefinePlugin({
       'process.env': config.dev.env,
     }),
     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-    new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({

webpack/webpack.prod.conf.js

@@ -8,13 +8,13 @@ const merge = require('webpack-merge');
 const baseWebpackConfig = require('./webpack.base.conf');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const env = process.env.NODE_ENV === 'testing' ?
+const env = process.env.NODE_ENV === 'test' ?
   require('./config/test.env') :
   config.build.env;
 
 const webpackConfig = merge(baseWebpackConfig, {
   module: {
-    loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }),
+    rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }),
   },
   devtool: config.build.productionSourceMap ? '#source-map' : false,
   output: {
@@ -22,12 +22,6 @@ const webpackConfig = merge(baseWebpackConfig, {
     filename: utils.assetsPath('js/[name].[chunkhash].js'),
     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
   },
-  vue: {
-    loaders: utils.cssLoaders({
-      sourceMap: config.build.productionSourceMap,
-      extract: true,
-    }),
-  },
   plugins: [
     // http://vuejs.github.io/vue-loader/workflow/production.html
     new webpack.DefinePlugin({
@@ -37,15 +31,17 @@ const webpackConfig = merge(baseWebpackConfig, {
       compress: {
         warnings: false,
       },
+      sourceMap: true,
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
     // extract css into its own file
-    new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+    }),
     // generate dist index.html with correct asset hash for caching.
     // you can customize output by editing /index.html
     // see https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
-      filename: process.env.NODE_ENV === 'testing' ?
+      filename: process.env.NODE_ENV === 'test' ?
         'index.html' :
         config.build.index,
       template: './website/client/index.html',
@@ -97,4 +93,9 @@ if (config.build.productionGzip) {
   );
 }
 
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // eslint-disable-line global-require
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin());
+}
+
 module.exports = webpackConfig;

webpack/webpack.test.conf.js

@@ -0,0 +1,24 @@
+// This is the webpack config used for unit tests.
+const merge = require('webpack-merge');
+const baseConfig = require('./webpack.base.conf');
+const utils = require('./utils');
+const webpack = require('webpack');
+const testEnv = require('./config/test.env');
+
+const webpackConfig = merge(baseConfig, {
+  // use inline sourcemap for karma-sourcemap-loader
+  module: {
+    rules: utils.styleLoaders(),
+  },
+  devtool: '#inline-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': testEnv,
+    }),
+  ],
+});
+
+// no need for app entry during tests
+delete webpackConfig.entry;
+
+module.exports = webpackConfig;

website/client/.babelrc

@@ -1,5 +1,17 @@
 {
-  "presets": ["es2015"],
+  "env": {
+    "test": {
+      "presets": [
+        ["es2015"],
+      ],
+      plugins: [
+        ["istanbul"],
+      ],
+    },
+  },
+  "presets": [
+    ["es2015", { modules: false }]
+  ],
   "plugins": [
     "transform-object-rest-spread",
     "syntax-async-functions",