[update] webpack 4 babel 7

dependency hell

.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["env", "react", "stage-1"],
-  "plugins": ["transform-decorators-legacy"]
-}

package.json

@@ -1,10 +1,10 @@
 {
   "name": "chaoticbackup",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "Chaotic Backup",
   "scripts": {
     "start": "webpack-dev-server -d --inline --host 0.0.0.0 --history-api-fallback",
-    "build": "webpack -d"
+    "build": "webpack -p"
   },
   "repository": {
     "type": "git",
@@ -30,26 +30,30 @@
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
-    "babel-core": "^6.21.0",
+    "@babel/cli": "^7.2.3",
-    "babel-eslint": "^10.0.0",
+    "@babel/core": "^7.2.2",
-    "babel-loader": "^7.1.5",
+    "@babel/node": "^7.2.2",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "@babel/plugin-proposal-class-properties": "^7.2.3",
-    "babel-polyfill": "^6.26.0",
+    "@babel/plugin-proposal-decorators": "^7.2.3",
-    "babel-preset-env": "^1.6.1",
+    "@babel/plugin-transform-runtime": "^7.2.0",
-    "babel-preset-react": "^6.16.0",
+    "@babel/polyfill": "^7.2.5",
-    "babel-preset-stage-1": "^6.16.0",
+    "@babel/preset-env": "^7.2.3",
-    "css-loader": "^1.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.0",
     "eslint": "^5.7.1",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.0.0",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "mini-css-extract-plugin": "^0.5.0",
-    "mini-css-extract-plugin": "^0.4.4",
     "node-sass": "^4.10.0",
     "sass-loader": "^7.0.x",
     "style-loader": "^0.23.1",
-    "webpack": "^3.12.0",
+    "webpack": "^4.28.3",
-    "webpack-dev-server": "^2.11.3"
+    "webpack-cli": "^3.2.0",
+    "webpack-dev-server": "^3.1.14"
   }
 }

webpack.4.config.babel.js

@@ -1,74 +0,0 @@
-import webpack from 'webpack';
-import path from 'path';
-
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const devMode = process.env.NODE_ENV !== 'production'
-
-export default {
-  entry: ['babel-polyfill', `${__dirname}/src/components/index.js`],
-
-  output: {
-    path: `${__dirname}/build`,
-    publicPath: '/build/',
-    filename: 'bundle.js',
-  },
-
-  optimization: {
-    splitChunks: {
-      cacheGroups: {
-        styles: {
-          name: 'styles',
-          test: /\.css$/,
-          chunks: 'all',
-          enforce: true
-        }
-      }
-    }
-  },
-
-  module: {
-    rules: [
-      {
-        test: /\.jsx?$/, exclude: /node_modules/,
-        use: 'babel-loader'
-      },
-      {
-        test: /\.s?[ac]ss$/,
-        use: [
-          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
-          'css-loader',
-          'sass-loader',
-        ],
-      }
-    ]
-  },
-
-  resolve: {
-    extensions: ['.js', '.jsx'],
-  },
-
-  node: {
-    fs: 'empty',
-  },
-
-  // First array is dev only, second is production
-  plugins: process.argv.indexOf('-p') === -1 ? [
-  new MiniCssExtractPlugin({
-    filename: devMode ? '[name].css' : '[name].[hash].css',
-  })
-  ] : [
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production'),
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      output: {
-        comments: false,
-      },
-      warnings: true,
-    }),
-    new ExtractTextPlugin({
-      filename: 'style.css',
-      allChunks: true
-    })
-  ],
-};

webpack.config.babel.js

@@ -1,31 +1,58 @@
-import webpack from 'webpack';
+const path = require('path');
-import path from 'path';
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const webpack = require('webpack');
+require("@babel/register");
 
-let ExtractTextPlugin = require('extract-text-webpack-plugin');
+const devMode = (process.env.NODE_ENV !== 'production' && process.argv.indexOf('-p') === -1);
+
+const config = {
+  entry: ["@babel/polyfill", `${__dirname}/src/components/index.js`],
 
-export default {
-  entry: ['babel-polyfill', `${__dirname}/src/components/index.js`],
   output: {
     path: `${__dirname}/build`,
     publicPath: '/build/',
     filename: 'bundle.js',
   },
 
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        styles: {
+          name: 'styles',
+          test: /\.css$/,
+          chunks: 'all',
+          enforce: true
+        }
+      }
+    }
+  },
+
   module: {
     rules: [
       {
-        test: /\.jsx?$/, exclude: /node_modules/,
+        test: /\.(js|jsx)$/, 
-        use: 'babel-loader'
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        options: {
+          "presets": [
+            "@babel/preset-env",
+            "@babel/preset-react",
+            "@babel/preset-flow",
+          ],
+          "plugins": [
+            "@babel/plugin-transform-runtime",
+            ["@babel/plugin-proposal-decorators", {"legacy": true }],
+            ["@babel/plugin-proposal-class-properties", { "loose": true }]
+          ]
+        }
       },
       {
-        test: /\.scss$/,
+        test: /\.s?[ac]ss$/,
-        use: ExtractTextPlugin.extract({
+        use: [
-          fallback: 'style-loader',
+          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
-          use: [
+          'css-loader',
-            {loader: 'css-loader', options: { sourceMap: true }},
+          'sass-loader',
-            {loader: 'sass-loader', options: { sourceMap: true }},
+        ],
-          ]
-        })
       }
     ]
   },
@@ -39,10 +66,10 @@ export default {
   },
 
   // First array is dev only, second is production
-  plugins: process.argv.indexOf('-p') === -1 ? [
+  plugins: devMode ? [
-    new ExtractTextPlugin({
+    new MiniCssExtractPlugin({
-      filename: 'style.css',
+      filename: '[name].css',
-      allChunks: true
+      chunkFilename: '[id].css',
     })
   ] : [
     new webpack.DefinePlugin({
@@ -54,9 +81,12 @@ export default {
       },
       warnings: true,
     }),
-    new ExtractTextPlugin({
+    new MiniCssExtractPlugin({
-      filename: 'style.css',
+      filename: '[name].[hash].css',
-      allChunks: true
+      chunkFilename: '[id].[hash].css',
     })
   ],
 };
+
+// Exports
+module.exports = config;