@stanlemon/webdev 0.1.0

package/.babelrc.json

@@ -0,0 +1,21 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "bugfixes": true,
+        "targets": {
+          "browsers": [
+            "last 1 year",
+            "not dead",
+            "not opera < 1000",
+            "not op_mob < 1000",
+            "not Samsung < 1000"
+          ]
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ]
+}

package/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "@stanlemon"
+  ]
+}

package/README.md

@@ -0,0 +1,45 @@
+# Webdev
+
+This repository contains all of my usual environment setup for babel, webpack and jest for developing React apps. I got tired of copying and pasting the same config files everywhere, so I put this together.
+
+To get started, either copy [apps/template](../../apps/template/) or create these files:
+
+package.json
+```json
+{
+  "type": "module",
+  "scripts": {
+    "start": "webpack serve",
+    "build": "NODE_ENV=production webpack",
+    "test": "jest",
+    "lint": "eslint --ext js,jsx,ts,tsx ./src/",
+    "lint:format": "eslint --fix --ext js,jsx,ts,tsx ./src/"
+  },
+  "dependencies": {
+    "@stanlemon/webdev": "*"
+  }
+}
+```
+
+webpack.config.js
+```javascript
+export { default } from "@stanlemon/webdev/webpack.config.js";
+```
+
+jest.config.js
+```javascript
+export { default } from "@stanlemon/webdev/jest.config.js";
+```
+
+.eslintrc.json
+```json
+{
+  "extends": [
+    "@stanlemon"
+  ]
+}
+```
+
+Then run `npm install` and start coding!
+
+_Eventually I'll add some CLI tooling to streamline this further._

package/jest.config.js

@@ -0,0 +1,22 @@
+import path from "path";
+import { fileURLToPath } from "url";
+import { readFileSync } from "fs";
+
+const babelOptions = JSON.parse(
+  readFileSync(new URL("./.babelrc.json", import.meta.url))
+);
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default {
+  verbose: true,
+  setupFilesAfterEnv: [path.resolve(__dirname, "./jest.setup.js")],
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+\\.(js|jsx|ts|tsx)?$": ["babel-jest", babelOptions],
+  },
+  moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
+  moduleNameMapper: {
+    "\\.(css|less|sass|scss)$": "identity-obj-proxy",
+  },
+};

package/jest.setup.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@stanlemon/webdev",
+  "version": "0.1.0",
+  "description": "My typical web development setup, but without all the copy and paste.",
+  "keywords": [
+    "webpack",
+    "babel",
+    "jest",
+    "react"
+  ],
+  "author": "Stan Lemon <stanlemon@users.noreply.github.com>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=17.0"
+  },
+  "type": "module",
+  "scripts": {
+    "lint": "eslint --ext js,jsx,ts,tsx ./",
+    "lint:format": "eslint --fix --ext js,jsx,ts,tsx ./"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "@babel/preset-react": "^7.16.5",
+    "@babel/preset-typescript": "^7.16.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@stanlemon/eslint-config": "*",
+    "@testing-library/dom": "^8.11.1",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.0.3",
+    "@types/node": "^17.0.0",
+    "@types/react": "^17.0.37",
+    "@types/webpack": "^5.28.0",
+    "@types/webpack-env": "^1.16.3",
+    "babel-jest": "^27.4.5",
+    "babel-loader": "^8.2.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.5.1",
+    "html-webpack-plugin": "^5.5.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.4.5",
+    "less": "^4.1.2",
+    "less-loader": "^10.2.0",
+    "react-refresh": "^0.11.0",
+    "style-loader": "^3.3.1",
+    "typescript": "^4.5.4",
+    "webpack": "^5.65.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.6.0"
+  }
+}

package/webpack.config.js

@@ -0,0 +1,103 @@
+import path from "path";
+import { readFileSync } from "fs";
+import webpack from "webpack";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
+import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
+import { CleanWebpackPlugin } from "clean-webpack-plugin";
+
+const babelOptions = JSON.parse(
+  readFileSync(new URL("./.babelrc.json", import.meta.url))
+);
+
+const ENV = process.env.NODE_ENV ?? "development";
+
+const isDevelopment = ENV !== "production";
+
+export default {
+  mode: isDevelopment ? "development" : "production",
+  entry: ["./src/index.tsx"],
+  output: {
+    filename: "[name].[contenthash].js",
+    path: path.resolve("./", "dist"),
+  },
+  devtool: isDevelopment ? "eval-source-map" : "source-map",
+  devServer: {
+    hot: true,
+    historyApiFallback: true,
+  },
+  optimization: {
+    moduleIds: "deterministic",
+    runtimeChunk: "single",
+    splitChunks: {
+      chunks: "all",
+      cacheGroups: {
+        react: {
+          test(module) {
+            // `module.resource` contains the absolute path of the file on disk.
+            return (
+              module.resource && module.resource.includes("node_modules/react")
+            );
+          },
+          chunks: "initial",
+          filename: "react.[contenthash].js",
+          priority: 1,
+          maxInitialRequests: 2,
+          minChunks: 1,
+        },
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendors",
+          chunks: "all",
+        },
+      },
+    },
+  },
+  performance: {
+    hints: isDevelopment ? false : "warning",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.([j|t]s)x?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            ...babelOptions,
+            plugins: [isDevelopment && "react-refresh/babel"].filter(Boolean),
+          },
+        },
+      },
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.less$/,
+        use: ["style-loader", "css-loader", "less-loader"],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
+        loader: "url-loader",
+      },
+    ],
+  },
+  resolve: {
+    // Enable webpack to find files without these extensions
+    extensions: [".tsx", ".ts", ".jsx", ".js"],
+  },
+  plugins: [
+    ...[
+      new CleanWebpackPlugin(),
+      new HtmlWebpackPlugin({
+        template: path.resolve("./", "index.html"),
+      }),
+      new webpack.DefinePlugin({
+        "process.env.NODE_ENV": JSON.stringify(ENV),
+      }),
+    ],
+    ...[!isDevelopment && new BundleAnalyzerPlugin()].filter(Boolean),
+    ...[isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),
+  ],
+};