matthewoestreich · April 3, 2020 01:59
diff --git a/.1.Rect-Boilerplate b/.1.Rect-Boilerplate
 React boilerplate
diff --git a/.babelrc b/.babelrc
 {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }
diff --git a/.eslintignore b/.eslintignore
 node_modules/
 dist/
 build/
diff --git a/.eslintrc b/.eslintrc
 {
    "parser": "babel-eslint",
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": 8,
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
        "browser": true,
        "jest": true
    },
    "extends": ["react-app", "airbnb", "prettier", "prettier/react"],
    "plugins": ["prettier", "react-hooks"],
    "rules": {
        "react-hooks/rules-of-hooks": 2,
        "react-hooks/exhaustive-deps": 1,
        "radix": 0,
        "no-restricted-syntax": 0,
        "no-await-in-loop": 0,
        "no-console": 0,
        "no-underscore-dangle": [
            "error",
            {
                "allow": ["__REDUX_DEVTOOLS_EXTENSION__"]
            }
        ],
        "consistent-return": 0,
        "no-param-reassign": [2, { "props": false }],
        "no-return-assign": [2, "except-parens"],
        "no-use-before-define": 0,
        "import/prefer-default-export": 0,
        "import/no-cycle": 0,
        "react/no-array-index-key": 0,
        "react/forbid-prop-types": 0,
        "react/prop-types": [2, { "skipUndeclared": true }],
        "react/jsx-fragments": [2, "element"],
        "react/state-in-constructor": 0,
        "react/jsx-props-no-spreading": 0,
        "jsx-a11y/click-events-have-key-events": 0
    },
    "settings": {
        // Allows us to lint absolute imports within codebase
        "import/resolver": {
            "node": {
                "moduleDirectory": ["node_modules", "src/"]
            }
        }
    }
 }
diff --git a/1.install.md b/1.install.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title>React/Webpack/Babel From Scratch</title>
 </head>
 <body>
  <div id="root"></div>
 </body>
 </html>
diff --git a/package.json b/package.json
 "scripts": {
  "start": "webpack-dev-server --open --mode development",
  "build": "webpack --mode production"
 }
diff --git a/webpack.config.js b/webpack.config.js
 const path = require("path");
 const HtmlWebPackPlugin = require("html-webpack-plugin");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");

 module.exports = {
  entry: {
    bundle: path.resolve(__dirname, "./src/index.js")
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        resolve: { extensions: [".js", ".jsx"] },
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    })
  ]
 };
	{
	"parser": "babel-eslint",
	"parserOptions": {
	"sourceType": "module",
	"ecmaVersion": 8,
	"ecmaFeatures": {
	"jsx": true
	}
	},
	"env": {
	"browser": true,
	"jest": true
	},
	"extends": ["react-app", "airbnb", "prettier", "prettier/react"],
	"plugins": ["prettier", "react-hooks"],
	"rules": {
	"react-hooks/rules-of-hooks": 2,
	"react-hooks/exhaustive-deps": 1,
	"radix": 0,
	"no-restricted-syntax": 0,
	"no-await-in-loop": 0,
	"no-console": 0,
	"no-underscore-dangle": [
	"error",
	{
	"allow": ["__REDUX_DEVTOOLS_EXTENSION__"]
	}
	],
	"consistent-return": 0,
	"no-param-reassign": [2, { "props": false }],
	"no-return-assign": [2, "except-parens"],
	"no-use-before-define": 0,
	"import/prefer-default-export": 0,
	"import/no-cycle": 0,
	"react/no-array-index-key": 0,
	"react/forbid-prop-types": 0,
	"react/prop-types": [2, { "skipUndeclared": true }],
	"react/jsx-fragments": [2, "element"],
	"react/state-in-constructor": 0,
	"react/jsx-props-no-spreading": 0,
	"jsx-a11y/click-events-have-key-events": 0
	},
	"settings": {
	// Allows us to lint absolute imports within codebase
	"import/resolver": {
	"node": {
	"moduleDirectory": ["node_modules", "src/"]
	}
	}
	}
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>React/Webpack/Babel From Scratch</title>
	</head>
	<body>
	<div id="root"></div>
	</body>
	</html>
	"scripts": {
	"start": "webpack-dev-server --open --mode development",
	"build": "webpack --mode production"
	}
	const path = require("path");
	const HtmlWebPackPlugin = require("html-webpack-plugin");
	const { CleanWebpackPlugin } = require("clean-webpack-plugin");

	module.exports = {
	entry: {
	bundle: path.resolve(__dirname, "./src/index.js")
	},
	module: {
	rules: [
	{
	test: /\.(js\|jsx)$/,
	exclude: /node_modules/,
	resolve: { extensions: [".js", ".jsx"] },
	use: {
	loader: "babel-loader"
	}
	},
	{
	test: /\.html$/,
	use: [
	{
	loader: "html-loader"
	}
	]
	}
	]
	},
	plugins: [
	new CleanWebpackPlugin(),
	new HtmlWebPackPlugin({
	template: "./public/index.html",
	filename: "./index.html"
	})
	]
	};