From 0661c0a956fdd1027eede5f0bc2816b3efa2623e Mon Sep 17 00:00:00 2001 From: Alfred Melch Date: Thu, 2 Jan 2020 23:21:03 +0100 Subject: [PATCH] Add js project files --- .gitignore | 3 ++ .prettierrc | 4 ++ babel.config.js | 8 ++++ package.json | 21 +++++++++++ postcss.config.js | 7 ++++ src/App.css | 30 +++++++++++++++ src/App.js | 17 +++++++++ src/index.js | 15 ++++++++ webpack.config.js | 93 +++++++++++++++++++++++++++++++++++++++++++++++ 9 files changed, 198 insertions(+) create mode 100644 .gitignore create mode 100644 .prettierrc create mode 100644 babel.config.js create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 src/App.css create mode 100644 src/App.js create mode 100644 src/index.js create mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c163077 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +.vscode/ +build/ +node_modules/ \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..b2095be --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "semi": false, + "singleQuote": true +} diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..133caad --- /dev/null +++ b/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) + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..eb52c8c --- /dev/null +++ b/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" +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..bff025d --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,7 @@ +module.exports = { + plugins: [ + require('postcss-flexbugs-fixes'), + require('postcss-preset-env'), + require('postcss-normalize') + ] +} diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..3377be8 --- /dev/null +++ b/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; +} diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..e24581a --- /dev/null +++ b/src/App.js @@ -0,0 +1,17 @@ +import React from 'react' + +import './App.css' + +export const App = () => { + return ( + <> +
+

Ebermergen

+
+
+ +
+ + + ) +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..a6fc942 --- /dev/null +++ b/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(, createRootElement()) diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..dba1be0 --- /dev/null +++ b/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' + } + } +}