@stanlemon/webdev 0.1.3 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stanlemon/webdev",
-  "version": "0.1.3",
+  "version": "0.1.7",
   "description": "My typical web development setup, but without all the copy and paste.",
   "keywords": [
     "webpack",
@@ -19,8 +19,6 @@
     "lint:format": "eslint --fix --ext js,jsx,ts,tsx ./"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "@babel/core": "^7.16.5",
     "@babel/preset-env": "^7.16.5",
     "@babel/preset-react": "^7.16.5",
@@ -40,11 +38,14 @@
     "babel-loader": "^8.2.3",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.5.1",
+    "dotenv": "^10.0.0",
     "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": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-refresh": "^0.11.0",
     "style-loader": "^3.3.1",
     "typescript": "^4.5.4",

package/webpack.config.js

@@ -5,18 +5,40 @@ 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";
+import { config as dotenv } from "dotenv";
+
+dotenv();
 
 const babelOptions = JSON.parse(
   readFileSync(new URL("./.babelrc.json", import.meta.url))
 );
 
-const ENV = process.env.NODE_ENV ?? "development";
+// Entry points, which can be separated by a semi-colon
+const WEBDEV_ENTRY = process.env.WEBDEV_ENTRY ?? "./src/index.tsx";
+// HTML pages to create, which can be separated by a semi-colon
+// If you prefix a page with a ! it will disable script injection
+// The filename from the supplied path is used as the filename of the resulting file
+const WEBDEV_HTML = process.env.WEBDEV_HTML ?? "./index.html";
+// Proxy path's can be designated as path@host, separated by semi-colons
+// For example /api@http://localhost:3000;/auth@http://localhost:4000
+const WEBDEV_PROXY = process.env.WEBDEV_HTML ?? "";
+const NODE_ENV = process.env.NODE_ENV ?? "development";
+
+const proxy = {};
+WEBDEV_PROXY.split(";").forEach((entry) => {
+  if (entry.indexOf("@") === -1) {
+    return;
+  }
+  const path = entry.substring(0, entry.indexOf("@"));
+  const host = entry.substring(entry.indexOf("@") + 1);
+  proxy[path] = host;
+});
 
-const isDevelopment = ENV !== "production";
+const isDevelopment = NODE_ENV !== "production";
 
 export default {
   mode: isDevelopment ? "development" : "production",
-  entry: ["./src/index.tsx"],
+  entry: WEBDEV_ENTRY.split(";"),
   output: {
     filename: "[name].[contenthash].js",
     path: path.resolve("./", "dist"),
@@ -25,6 +47,7 @@ export default {
   devServer: {
     hot: true,
     historyApiFallback: true,
+    proxy,
   },
   optimization: {
     moduleIds: "deterministic",
@@ -79,7 +102,7 @@ export default {
       },
       {
         test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
-        loader: "url-loader",
+        type: "asset/resource",
       },
     ],
   },
@@ -90,11 +113,20 @@ export default {
   plugins: [
     ...[
       new CleanWebpackPlugin(),
-      new HtmlWebpackPlugin({
-        template: path.resolve("./", "index.html"),
+      ...WEBDEV_HTML.split(";").map((html) => {
+        let inject = true;
+        if (html.substring(0, 1) === "!") {
+          html = html.substring(1);
+          inject = false;
+        }
+        return new HtmlWebpackPlugin({
+          filename: path.basename(html),
+          template: html,
+          inject,
+        });
       }),
       new webpack.DefinePlugin({
-        "process.env.NODE_ENV": JSON.stringify(ENV),
+        "process.env.NODE_ENV": JSON.stringify(NODE_ENV),
       }),
     ],
     ...[