Upgrade Webpack from v1.x to v3.x

frontend/src/metabase/internal/components/ColorsApp.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import cx from "classnames";
 
 // eslint-disable-next-line import/no-commonjs
-let colorStyles = require("!style!css?modules!postcss!metabase/css/core/colors.css");
+let colorStyles = require("!style-loader!css-loader?modules!postcss-loader!metabase/css/core/colors.css");
 
 const ColorsApp = () =>
     <div className="p2">

package.json

@@ -74,6 +74,7 @@
     "stack-source-map": "^1.0.4",
     "tether": "^1.2.0",
     "underscore": "^1.8.3",
+    "webpack-dev-middleware": "^1.12.0",
     "z-index": "0.0.1"
   },
   "devDependencies": {
@@ -81,7 +82,7 @@
     "babel-cli": "^6.11.4",
     "babel-core": "^6.20.0",
     "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.4",
+    "babel-loader": "^7.1.2",
     "babel-plugin-add-react-displayname": "^0.0.4",
     "babel-plugin-c-3po": "^0.5.8",
     "babel-plugin-transform-builtin-extend": "^1.1.2",
@@ -93,24 +94,24 @@
     "babel-register": "^6.11.6",
     "banner-webpack-plugin": "^0.2.3",
     "concurrently": "^3.1.0",
-    "css-loader": "^0.28.0",
+    "css-loader": "^0.28.7",
     "documentation": "^4.0.0-rc.1",
     "enzyme": "^2.7.0",
     "eslint": "^3.5.0",
-    "eslint-import-resolver-webpack": "^0.8.0",
-    "eslint-loader": "^1.6.0",
+    "eslint-import-resolver-webpack": "^0.8.3",
+    "eslint-loader": "^1.9.0",
     "eslint-plugin-flowtype": "^2.22.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jasmine": "^2.2.0",
     "eslint-plugin-react": "^6.3.0",
     "exports-loader": "^0.6.3",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^3.0.1",
     "file-loader": "^0.11.1",
     "flow-bin": "^0.37.4",
     "fs-promise": "^2.0.2",
     "glob": "^7.1.1",
     "html-webpack-harddisk-plugin": "^0.1.0",
-    "html-webpack-plugin": "^2.14.0",
+    "html-webpack-plugin": "^2.30.1",
     "image-diff": "^1.6.3",
     "imports-loader": "^0.7.0",
     "jasmine": "^2.4.1",
@@ -126,7 +127,7 @@
     "karma-jasmine": "^1.1.0",
     "karma-junit-reporter": "^1.1.0",
     "karma-nyan-reporter": "^0.2.2",
-    "karma-webpack": "^1.7.0",
+    "karma-webpack": "^2.0.5",
     "lint-staged": "^3.3.1",
     "postcss-cssnext": "^2.4.0",
     "postcss-import": "^9.0.0",
@@ -141,9 +142,9 @@
     "style-loader": "^0.16.1",
     "unused-files-webpack-plugin": "^3.0.0",
     "webchauffeur": "^1.2.0",
-    "webpack": "^1.14.0",
-    "webpack-dev-server": "^1.16.2",
-    "webpack-hot-middleware": "^2.14.0",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-hot-middleware": "^2.19.1",
     "webpack-postcss-tools": "^1.1.2"
   },
   "scripts": {

postcss.config.js

+const webpackPostcssTools = require('webpack-postcss-tools');
+const _ = require('underscore');
+const glob = require('glob');
+
+var SRC_PATH = __dirname + '/frontend/src/metabase';
+// Build mapping of CSS variables
+const CSS_SRC = glob.sync(SRC_PATH + '/css/**/*.css');
+const CSS_MAPS = { vars: {}, media: {}, selector: {} };
+CSS_SRC.map(webpackPostcssTools.makeVarMap).forEach(function(map) {
+    for (let name in CSS_MAPS) _.extend(CSS_MAPS[name], map[name]);
+});
+
+// CSS Next:
+const CSSNEXT_CONFIG = {
+    features: {
+        // pass in the variables and custom media we scanned for before
+        customProperties: { variables: CSS_MAPS.vars },
+        customMedia: { extensions: CSS_MAPS.media }
+    },
+    import: {
+        path: ['resources/frontend_client/app/css']
+    },
+    compress: false
+};
+
+module.exports = {
+    plugins: {
+        'postcss-import': {},
+        'postcss-url': {},
+        'postcss-cssnext': CSSNEXT_CONFIG,
+    }
+}

webpack.config.js

@@ -5,7 +5,6 @@ require("babel-register");
 require("babel-polyfill");
 
 var webpack = require('webpack');
-var webpackPostcssTools = require('webpack-postcss-tools');
 
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -13,18 +12,11 @@ var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
 var UnusedFilesWebpackPlugin = require("unused-files-webpack-plugin").default;
 var BannerWebpackPlugin = require('banner-webpack-plugin');
 
-var _ = require('underscore');
-var glob = require('glob');
 var fs = require('fs');
 
 var chevrotain = require("chevrotain");
 var allTokens = require("./frontend/src/metabase/lib/expressions/tokens").allTokens;
 
-function hasArg(arg) {
-    var regex = new RegExp("^" + ((arg.length === 2) ? ("-\\w*"+arg[1]+"\\w*") : (arg)) + "$");
-    return process.argv.filter(regex.test.bind(regex)).length > 0;
-}
-
 var SRC_PATH = __dirname + '/frontend/src/metabase';
 var LIB_SRC_PATH = __dirname + '/frontend/src/metabase-lib';
 var TEST_SUPPORT_PATH = __dirname + '/frontend/test/__support__';
@@ -33,38 +25,11 @@ var BUILD_PATH = __dirname + '/resources/frontend_client';
 // default NODE_ENV to development
 var NODE_ENV = process.env["NODE_ENV"] || "development";
 
-// Need to scan the CSS files for variable and custom media used across files
-// NOTE: this requires "webpack -w" (watch mode) to be restarted when variables change :(
-var IS_WATCHING = hasArg("-w") || hasArg("--watch");
-if (IS_WATCHING) {
-    process.stderr.write("Warning: in webpack watch mode you must restart webpack if you change any CSS variables or custom media queries\n");
-}
-
 // Babel:
 var BABEL_CONFIG = {
     cacheDirectory: process.env.BABEL_DISABLE_CACHE ? null : ".babel_cache"
 };
 
-// Build mapping of CSS variables
-var CSS_SRC = glob.sync(SRC_PATH + '/css/**/*.css');
-var CSS_MAPS = { vars: {}, media: {}, selector: {} };
-CSS_SRC.map(webpackPostcssTools.makeVarMap).forEach(function(map) {
-    for (var name in CSS_MAPS) _.extend(CSS_MAPS[name], map[name]);
-});
-
-// CSS Next:
-var CSSNEXT_CONFIG = {
-    features: {
-        // pass in the variables and custom media we scanned for before
-        customProperties: { variables: CSS_MAPS.vars },
-        customMedia: { extensions: CSS_MAPS.media }
-    },
-    import: {
-        path: ['resources/frontend_client/app/css']
-    },
-    compress: false
-};
-
 var CSS_CONFIG = {
     localIdentName: NODE_ENV !== "production" ?
         "[name]__[local]___[hash:base64:5]" :
@@ -100,36 +65,38 @@ var config = module.exports = {
             {
                 test: /\.(js|jsx)$/,
                 exclude: /node_modules/,
-                loader: "babel",
+                loader: "babel-loader",
                 query: BABEL_CONFIG
             },
             {
                 test: /\.(js|jsx)$/,
                 exclude: /node_modules|\.spec\.js/,
-                loader: 'eslint'
+                loader: 'eslint-loader'
             },
             {
                 test: /\.(eot|woff2?|ttf|svg|png)$/,
                 loader: "file-loader"
             },
-            {
-                test: /\.json$/,
-                loader: "json-loader"
-            },
             {
                 test: /\.css$/,
-                loader: ExtractTextPlugin.extract("style-loader", "css-loader?" + JSON.stringify(CSS_CONFIG) + "!postcss-loader")
+                use: ExtractTextPlugin.extract({
+                    fallback: "style-loader",
+                    use: [
+                        { loader: "css-loader?", options: CSS_CONFIG },
+                        { loader: "postcss-loader" }
+                    ]
+                })
             }
         ]
     },
 
     resolve: {
-        extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx", ".css"],
+        extensions: [".webpack.js", ".web.js", ".js", ".jsx", ".css"],
         alias: {
             'metabase':             SRC_PATH,
             'metabase-lib':         LIB_SRC_PATH,
             '__support__':          TEST_SUPPORT_PATH,
-            'style':                SRC_PATH + '/css/core/index.css',
+            'style':                SRC_PATH + '/css/core/index',
             'ace':                  __dirname + '/node_modules/ace-builds/src-min-noconflict',
         }
     },
@@ -146,7 +113,9 @@ var config = module.exports = {
         }),
         // Extracts initial CSS into a standard stylesheet that can be loaded in parallel with JavaScript
         // NOTE: the filename on disk won't include "?[chunkhash]" but the URL in index.html generated by HtmlWebpackPlugin will:
-        new ExtractTextPlugin('[name].bundle.css?[contenthash]'),
+        new ExtractTextPlugin({
+            filename: '[name].bundle.css?[contenthash]'
+        }),
         new HtmlWebpackPlugin({
             filename: '../../index.html',
             chunks: ["app-main", "styles"],
@@ -189,15 +158,7 @@ var config = module.exports = {
                 },
             }
         }),
-    ],
-
-    postcss: function (webpack) {
-        return [
-            require("postcss-import")(),
-            require("postcss-url")(),
-            require("postcss-cssnext")(CSSNEXT_CONFIG)
-        ]
-    }
+    ]
 };
 
 if (NODE_ENV === "hot") {
@@ -210,11 +171,20 @@ if (NODE_ENV === "hot") {
     config.module.loaders.unshift({
         test: /\.jsx$/,
         exclude: /node_modules/,
-        loaders: ['react-hot', 'babel?'+JSON.stringify(BABEL_CONFIG)]
+        use: [
+            { loader: 'react-hot-loader' },
+            { loader: 'babel-loader', options: BABEL_CONFIG }
+        ]
     });
 
     // disable ExtractTextPlugin
-    config.module.loaders[config.module.loaders.length - 1].loader = "style-loader!css-loader?" + JSON.stringify(CSS_CONFIG) + "!postcss-loader"
+    config.module.loaders[config.module.loaders.length - 1].use = {
+        loader: "style-loader",
+        use: [
+            { loader: "css-loader?", options: CSS_CONFIG },
+            { loader: "postcss-loader" }
+        ]
+    }
 
     config.devServer = {
         hot: true,
@@ -256,11 +226,6 @@ if (NODE_ENV !== "production") {
     config.output.pathinfo = true;
 } else {
     config.plugins.push(new webpack.optimize.UglifyJsPlugin({
-        // suppress uglify warnings in production
-        // output from these warnings was causing Heroku builds to fail (#5410)
-        compress: {
-            warnings: false,
-        },
         mangle: {
             // this is required to ensure we don't minify Chevrotain token identifiers
             // https://github.com/SAP/chevrotain/tree/master/examples/parser/minification