Add js project files

.gitignore

@@ -0,0 +1,3 @@
+.vscode/
+build/
+node_modules/

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

babel.config.js

@@ -0,0 +1,8 @@
+module.exports = api => {
+  // caching the babel config
+  api.cache.using(() => process.env.NODE_ENV)
+  return {
+    presets: ['@babel/preset-env', '@babel/preset-react']
+    // plugins: [api.env('development') && 'react-refresh/babel'].filter(Boolean)
+  }
+}

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "ebermergen",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "build": "webpack --mode production",
+    "build-fresh": "rm -rf build/ && npm run build",
+    "serve": "ws -d build --compress --hostname 0.0.0.0",
+    "test": "tests",
+    "lint": "eslint src",
+    "format": "prettier --write src/**/*.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@localhost:ebermergen"
+  },
+  "author": "",
+  "license": "ISC"
+}

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [
+    require('postcss-flexbugs-fixes'),
+    require('postcss-preset-env'),
+    require('postcss-normalize')
+  ]
+}

src/App.css

@@ -0,0 +1,30 @@
+body,
+html {
+  margin: 0;
+  padding: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.5;
+  background-color: #fce6cb;
+}
+
+html {
+  overflow-y: scroll;
+}
+
+header {
+  border-bottom: 2px solid white;
+  margin-bottom: 1em;
+  display: flex;
+  align-items: center;
+  padding: 0px 10px;
+}
+
+header h1 {
+  flex: 1;
+}
+
+footer {
+  border-top: 2px solid white;
+  margin-top: 1em;
+  padding: 0 10px;
+}

src/App.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import './App.css'
+
+export const App = () => {
+  return (
+    <>
+      <header>
+        <h1>Ebermergen</h1>
+      </header>
+      <main>
+        <canvas></canvas>
+      </main>
+      <footer>Made by Alfred Melch</footer>
+    </>
+  )
+}

src/index.js

@@ -0,0 +1,15 @@
+import 'regenerator-runtime/runtime'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import { App } from './App'
+
+function createRootElement() {
+  const body = document.getElementsByTagName('body')[0]
+  const root = document.createElement('div')
+  root.setAttribute('id', 'root')
+  body.appendChild(root)
+  return root
+}
+ReactDOM.render(<App />, createRootElement())

webpack.config.js

@@ -0,0 +1,93 @@
+const path = require('path')
+
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const WebpackBar = require('webpackbar')
+
+module.exports = (env, argv) => {
+  const isEnvProduction = argv.mode === 'production'
+  const isEnvDevelopment = argv.mode === 'development'
+
+  return {
+    output: {
+      path: path.resolve(__dirname, 'build'),
+      filename: 'static/js/[name].[contenthash:8].js',
+      chunkFilename: 'static/js/[name].[contenthash:8].chunk.js'
+    },
+    devtool: isEnvProduction ? 'source-map' : 'cheap-module-source-map',
+    module: {
+      rules: [
+        // process javascript with babel
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          loader: 'babel-loader'
+        },
+        // process css. css modules are enabled.
+        {
+          test: /\.css$/,
+          use: [
+            isEnvDevelopment && 'style-loader',
+            isEnvProduction && MiniCssExtractPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: {
+                modules: {
+                  localIdentName: isEnvProduction
+                    ? '[hash:base64]'
+                    : '[path][name]__[local]'
+                }
+              }
+            },
+            'postcss-loader'
+          ].filter(Boolean)
+        }
+      ]
+    },
+    optimization: {
+      minimize: isEnvProduction,
+      splitChunks: {
+        chunks: 'all',
+        name: false
+      },
+      runtimeChunk: {
+        name: entrypoint => `runtime-${entrypoint.name}`
+      }
+    },
+    plugins: [
+      // creat an index.html
+      new HtmlWebpackPlugin(),
+      // show a progress bar
+      new WebpackBar(),
+      // create a report.html for bundle size
+      // extract css to css files
+      isEnvProduction &&
+        new MiniCssExtractPlugin({
+          filename: 'static/css/[name].[contenthash:8].css',
+          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css'
+        }),
+      // use cssnano to minify css
+      isEnvProduction &&
+        new OptimizeCssAssetsPlugin({
+          cssProcessorOptions: {
+            map: { inline: false, annotation: true }
+          }
+        }),
+      isEnvProduction &&
+        new BundleAnalyzerPlugin({
+          analyzerMode: 'static',
+          openAnalyzer: false
+        })
+      // hot reload not working right now
+      // isEnvDevelopment &&
+      // new ReactRefreshWebpackPlugin({ disableRefreshCheck: true })
+    ].filter(Boolean),
+    devServer: {
+      stats: 'minimal'
+    }
+  }
+}