@stanlemon/webdev 0.1.1 → 0.1.5

package/jest.setup.js

@@ -1 +1 @@
-import "@testing-library/jest-dom";
+require("@testing-library/jest-dom");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stanlemon/webdev",
-  "version": "0.1.1",
+  "version": "0.1.5",
   "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,14 +38,18 @@
     "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",
+    "url-loader": "^4.1.1",
     "webpack": "^5.65.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.1",

package/webpack.config.js

@@ -5,18 +5,27 @@ 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";
+const NODE_ENV = process.env.NODE_ENV ?? "development";
 
-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"),
@@ -90,14 +99,29 @@ 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),
       }),
     ],
-    ...[!isDevelopment && new BundleAnalyzerPlugin()].filter(Boolean),
+    ...[
+      !isDevelopment &&
+        new BundleAnalyzerPlugin({
+          analyzerMode: "static",
+          openAnalyzer: false,
+        }),
+    ].filter(Boolean),
     ...[isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),
   ],
 };