Update Frontend Build Tooling (Node, Webpack, Babel)

.nvmrc

@@ -1 +1 @@
-6.11.5
+12.13.0

client/babel.config.js

@@ -0,0 +1,59 @@
+module.exports = function(api) {
+  // eslint-disable-next-line no-process-env
+  api.cache(() => process.env.NODE_ENV);
+
+  const presets = [
+    [
+      '@babel/preset-env',
+      {
+        modules: false
+      }
+    ],
+    '@babel/preset-react'
+  ];
+
+  const plugins = [
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-syntax-import-meta',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-json-strings',
+    [
+      '@babel/plugin-proposal-decorators',
+      {
+        legacy: true
+      }
+    ],
+    '@babel/plugin-proposal-function-sent',
+    '@babel/plugin-proposal-export-namespace-from',
+    '@babel/plugin-proposal-numeric-separator',
+    '@babel/plugin-proposal-throw-expressions',
+    '@babel/plugin-proposal-export-default-from',
+    '@babel/plugin-proposal-logical-assignment-operators',
+    '@babel/plugin-proposal-optional-chaining',
+    [
+      '@babel/plugin-proposal-pipeline-operator',
+      {
+        proposal: 'minimal'
+      }
+    ],
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+    '@babel/plugin-proposal-do-expressions',
+    '@babel/plugin-proposal-function-bind'
+  ];
+
+  return {
+    presets,
+    plugins,
+    env: {
+      development: {
+        plugins: ['react-hot-loader/babel']
+      },
+      test: {
+        presets: [
+          '@babel/preset-env',
+          ['@babel/preset-react', { development: true }]
+        ]
+      }
+    }
+  };
+};

client/package.json

@@ -11,15 +11,6 @@
   },
   "dependencies": {
     "@department-of-veterans-affairs/caseflow-frontend-toolkit": "https://github.com/department-of-veterans-affairs/caseflow-frontend-toolkit#a05abe6",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
     "es5-shim": "^4.5.10",
     "glamor": "^2.20.40",
     "history": "^4.7.2",
@@ -34,7 +25,34 @@
     "redux-thunk": "^2.2.0",
     "superagent": "^3.8.2",
     "superagent-no-cache": "^0.1.1",
-    "webpack": "^3.11.0"
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-decorators": "^7.0.0",
+    "@babel/plugin-proposal-do-expressions": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-bind": "^7.0.0",
+    "@babel/plugin-proposal-function-sent": "^7.0.0",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
+    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/polyfill": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.7.0",
+    "@babel/runtime-corejs2": "^7.0.0",
+    "babel-loader": "^8.0.0",
+    "react-hot-loader": "^4.12.18"
   },
   "devDependencies": {
     "@department-of-veterans-affairs/eslint-config-appeals": "https://github.com/department-of-veterans-affairs/eslint-config-appeals#f50522e",

client/src/index.jsx

@@ -6,11 +6,18 @@ import ReduxBase from '@department-of-veterans-affairs/caseflow-frontend-toolkit
 import reducer, { initState } from './reducer';
 import InitContainer from './containers/InitContainer';
 
-module.exports = {
+const efolderExpress = {
   init(props) {
-    render(<ReduxBase reducer={reducer} initialState={{ ...initState,
-      ...props }}>
-      <InitContainer />
-    </ReduxBase>, document.getElementById('efolder_express_app'));
+    render(
+      <ReduxBase reducer={reducer} initialState={{
+        ...initState,
+        ...props
+      }}>
+        <InitContainer />
+      </ReduxBase>,
+      document.getElementById('efolder_express_app')
+    );
   }
 };
+
+export default efolderExpress;

client/webpack.config.js

@@ -1,14 +1,125 @@
-const _ = require('lodash');
+const webpack = require('webpack');
 const path = require('path');
+const { compact } = require('lodash');
 
-const baseConfigs = require(
-  '@department-of-veterans-affairs/caseflow-frontend-toolkit/config/getWebpackConfig'
-)(__dirname, './src/index');
+const devBuild = process.env.NODE_ENV !== 'production'; // eslint-disable-line no-process-env
 
-module.exports = _.merge(baseConfigs, {
+const config = {
+  mode: devBuild ? 'development' : 'production',
+  entry: ['./src/index'],
   output: {
-    path: path.resolve(__dirname, '..', 'app', 'assets', 'javascripts'),
+    sourceMapFilename: 'sourcemap-[file].map',
+    path: path.join(__dirname, '../app/assets/javascripts'),
     filename: 'react-app.js',
-    library: 'efolderExpress'
+    library: 'efolderExpress',
+    libraryExport: 'default',
+    libraryTarget: 'umd'
+  },
+  plugins: compact([
+    new webpack.EnvironmentPlugin({ NODE_ENV: 'development' })
+  ]),
+  resolve: {
+    extensions: ['.js', '.jsx'],
+    alias: {
+      // This does not actually appear to be necessary, but it does silence
+      // a warning from superagent-no-cache.
+      ie: 'component-ie'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: new RegExp(
+          'node_modules/(?!@department-of-veterans-affairs/caseflow-frontend-toolkit)'
+        ),
+        use: [
+          {
+            loader: 'babel-loader'
+          }
+        ]
+      },
+      {
+        test: /\.(ttf|eot|woff|woff2)$/,
+        use: {
+          loader:
+            'url-loader?limit=1024&name=fonts/[name]-[hash].[ext]&outputPath=../../../public/&publicPath=/'
+        }
+      },
+      {
+        test: /\.module\.s(a|c)ss$/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              sourceMap: true
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.scss?$/,
+        exclude: /\.module.(s(a|c)ss)$/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.css?$/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              url: false
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(png|svg|jpg|gif)$/,
+        use: [
+          'url-loader?limit=1024&name=images/[name]-[hash].[ext]&outputPath=../../../public/&publicPath=/'
+        ]
+      }
+    ]
   }
-});
+};
+
+if (devBuild) {
+  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
+  config.devtool = 'eval-source-map';
+} else {
+  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
+  console.log('Generating source maps...'); // eslint-disable-line no-console
+  config.devtool = 'source-map';
+}
+
+module.exports = config;