New: Use package.json version webpack, clean, bundle (#587)

frontend/gulp/webpack.js

@@ -6,6 +6,7 @@ const webpack = require('webpack');
 const errorHandler = require('./helpers/errorHandler');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 const uiFolder = 'UI';
 const root = path.join(__dirname, '..', 'src');
@@ -31,6 +32,8 @@ const extractCSSPlugin = new ExtractTextPlugin({
 const plugins = [
   extractCSSPlugin,
 
+  new OptimizeCssAssetsPlugin({}),
+
   new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor'
   }),
@@ -41,7 +44,37 @@ const plugins = [
   })
 ];
 
-let babelPlugins = ['transform-class-properties', 'transform-react-jsx-source'];
+function babelPlugins() {
+
+  const bplugins = [];
+
+  bplugins.push(
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-syntax-import-meta',
+    '@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'
+  );
+
+  if (process.env.NODE_ENV !== 'production') {
+    bplugins.push('@babel/transform-react-jsx-source');
+  }
+
+  if (process.env.NODE_ENV === 'production') {
+    bplugins.push('transform-react-remove-prop-types');
+  }
+
+  return bplugins;
+}
 
 if (isProduction) {
   plugins.push(new UglifyJSPlugin({
@@ -54,8 +87,6 @@ if (isProduction) {
       }
     }
   }));
-
-  babelPlugins = ['transform-class-properties', 'transform-react-remove-prop-types'];
 }
 
 const config = {
@@ -107,8 +138,8 @@ const config = {
         exclude: /(node_modules|JsLibraries)/,
         loader: 'babel-loader',
         options: {
-          plugins: babelPlugins,
-          presets: ['env', 'decorators-legacy', 'react', 'stage-2']
+          plugins: babelPlugins(),
+          presets: ['@babel/env', '@babel/react']
         }
       },
 
@@ -195,14 +226,14 @@ const config = {
 
 gulp.task('webpack', () => {
   return gulp.src('index.js')
-    .pipe(webpackStream(config))
+    .pipe(webpackStream(config, webpack))
     .pipe(gulp.dest(''));
 });
 
 gulp.task('webpackWatch', () => {
   config.watch = true;
   return gulp.src('')
-    .pipe(webpackStream(config))
+    .pipe(webpackStream(config, webpack))
     .on('error', errorHandler)
     .pipe(gulp.dest(''))
     .on('error', errorHandler)

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "gulp build",
     "start": "gulp watch",
+    "clean": "rimraf ./_output/UI",
     "eslint": "esprint check",
     "eslint-fix": "eslint start --fix",
     "stylelint": "stylelint frontend/**/*.css --config frontend/.stylelintrc"
@@ -17,6 +18,18 @@
   "license": "GPL-3.0",
   "readmeFilename": "readme.md",
   "dependencies": {
+    "@babel/core": "7.2.2",
+    "@babel/plugin-proposal-class-properties": "7.2.3",
+    "@babel/plugin-proposal-decorators": "7.2.3",
+    "@babel/plugin-proposal-export-namespace-from": "7.2.0",
+    "@babel/plugin-proposal-function-sent": "7.2.0",
+    "@babel/plugin-proposal-json-strings": "7.2.0",
+    "@babel/plugin-proposal-numeric-separator": "7.2.0",
+    "@babel/plugin-proposal-throw-expressions": "7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "7.2.0",
+    "@babel/plugin-syntax-import-meta": "7.2.0",
+    "@babel/preset-env": "7.2.3",
+    "@babel/preset-react": "7.0.0",
     "@fortawesome/fontawesome-free": "5.5.0",
     "@fortawesome/fontawesome-svg-core": "1.2.8",
     "@fortawesome/free-regular-svg-icons": "5.5.0",
@@ -24,19 +37,14 @@
     "@fortawesome/react-fontawesome": "0.1.3",
     "@sentry/browser": "4.4.1",
     "autoprefixer": "9.1.5",
-    "babel-core": "6.26.3",
     "babel-eslint": "10.0.1",
-    "babel-loader": "7.1.5",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "babel-plugin-transform-react-remove-prop-types": "0.4.20",
+    "babel-loader": "8.0.4",
+    "babel-plugin-transform-react-remove-prop-types": "0.4.21",
     "babel-preset-decorators-legacy": "1.0.0",
-    "babel-preset-env": "1.7.0",
-    "babel-preset-react": "6.24.1",
-    "babel-preset-stage-2": "6.24.1",
     "classnames": "2.2.6",
     "clipboard": "2.0.1",
     "create-react-class": "15.6.3",
-    "css-loader": "0.28.9",
+    "css-loader": "0.28.11",
     "del": "3.0.0",
     "element-class": "0.2.2",
     "esformatter": "0.10.0",
@@ -45,11 +53,10 @@
     "eslint-plugin-react": "7.11.1",
     "esprint": "0.4.0",
     "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "1.1.11",
+    "file-loader": "2.0.0",
     "filesize": "3.6.1",
     "gulp": "3.9.1",
     "gulp-cached": "1.1.1",
-    "gulp-clean-css": "3.10.0",
     "gulp-concat": "2.6.1",
     "gulp-declare": "0.3.0",
     "gulp-livereload": "4.0.1",
@@ -69,9 +76,10 @@
     "moment": "2.22.2",
     "mousetrap": "1.6.2",
     "normalize.css": "8.0.1",
+    "optimize-css-assets-webpack-plugin": "3.2.0",
     "postcss-loader": "3.0.0",
-    "postcss-mixins": "6.2.0",
-    "postcss-nested": "4.1.0",
+    "postcss-mixins": "6.2.1",
+    "postcss-nested": "4.1.1",
     "postcss-simple-vars": "5.0.1",
     "prop-types": "15.6.2",
     "qs": "6.6.0",
@@ -102,16 +110,17 @@
     "redux-thunk": "2.3.0",
     "require-nocache": "1.0.0",
     "reselect": "3.0.1",
+    "rimraf": "2.6.2",
     "run-sequence": "2.2.1",
     "signalr": "2.4.0",
     "streamqueue": "1.1.2",
-    "style-loader": "0.19.1",
+    "style-loader": "0.23.1",
     "stylelint": "9.9.0",
     "stylelint-order": "2.0.0",
     "tar.gz": "1.0.7",
     "uglifyjs-webpack-plugin": "1.3.0",
-    "url-loader": "0.6.2",
-    "webpack": "3.10.0",
+    "url-loader": "1.1.2",
+    "webpack": "3.11.0",
     "webpack-stream": "4.0.3"
   },
   "main": "index.js"