webpack 4

package.4.json

@@ -0,0 +1,56 @@
+{
+  "name": "chaoticbackup",
+  "version": "1.4.0",
+  "description": "Chaotic Backup",
+  "scripts": {
+    "start": "webpack-dev-server -d --inline --host 0.0.0.0 --history-api-fallback",
+    "build": "webpack -p"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chaoticbackup/chaoticbackup.github.io.git"
+  },
+  "author": "Danude Sandstorm",
+  "license": "MIT",
+  "dependencies": {
+    "lokijs": "^1.5.1",
+    "mobx": "^4.1.0",
+    "mobx-react": "^5.0.0",
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "react-collapsible": "^2.2.x",
+    "react-digit-input": "^1.0.0",
+    "react-dom": "^16.0.0",
+    "react-interactive": "^0.8.1",
+    "react-onclickoutside": "^6.7.1",
+    "react-process-string": "^1.2.0",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
+    "react-transition-group": "^2.2.1",
+    "whatwg-fetch": "^2.0.3"
+  },
+  "devDependencies": {
+    "babel-core": "^6.21.0",
+    "babel-eslint": "^8.0.0",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-1": "^6.16.0",
+    "css-loader": "^0.28.10",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb": "^16.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^6.0.0",
+    "eslint-plugin-react": "^7.0.0",
+    "mini-css-extract-plugin": "^0.4.0",
+    "node-sass": "^4.8.3",
+    "postcss-loader": "^2.1.4",
+    "sass-loader": "^7.0.x",
+    "style-loader": "^0.21.x",
+    "webpack": "^4.6.x",
+    "webpack-cli": "^2.0.15",
+    "webpack-dev-server": "^3.1.x"
+  }
+}

webpack.4.config.babel.js

@@ -0,0 +1,74 @@
+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
+    })
+  ],
+};