Upgrade webpack to v2 and other deps (#8491)

* update to webpack2 and other deps

* fix linting

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'],
-    fallback: [path.join(__dirname, '../node_modules')],
+    extensions: ['*', '.js', '.vue', '.json'],
+    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',
-        include: projectRoot,
-        exclude: /node_modules/,
+        loader: 'vue-loader',
+        options: {
+          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 = {
-    formatter: eslintFriendlyFormatter,
-    emitWarning: true,
-  };
+  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
-  devtool: '#eval-source-map',
+  // cheap-module-eval-source-map is faster for development
+  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;