initial commit

webpack/options/plugins.js

@@ -0,0 +1,66 @@
+import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
+import CopyPlugin from "copy-webpack-plugin";
+import Dotenv from "dotenv-webpack";
+import ESLintPlugin from "eslint-webpack-plugin";
+import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import { join } from "path";
+import { ProgressPlugin } from "webpack";
+
+import config, { EnvironmentConfig } from "../config";
+
+const basePlugins = [
+  new HtmlWebpackPlugin({
+    publicPath: "/",
+    template: join(config.webpack.rootDir, "src/index.html"),
+  }),
+  new ForkTsCheckerWebpackPlugin({
+    typescript: {
+      configFile: join(config.webpack.rootDir, "tsconfig.json"),
+      mode: "write-references",
+    },
+  }),
+  new ESLintPlugin({
+    context: join(config.webpack.rootDir, "src"),
+    extensions: ["ts", "tsx"],
+    failOnError: !config.isDev,
+    lintDirtyModulesOnly: true,
+  }),
+  new CopyPlugin({
+    patterns: [
+      {
+        from: join(config.webpack.rootDir, "src/assets"),
+        to: "assets",
+        globOptions: {
+          dot: false,
+          ignore: ["**/*.tsx", "**/*.ico"],
+        },
+        noErrorOnMissing: true,
+      },
+    ],
+  }),
+  new Dotenv({
+    path: (() => {
+      let path = "./.env";
+      if (config.isProd) {
+        path = "./.env.production";
+      } else if (config.isPrelive) {
+        path = "./.env.prelive";
+      } else if (config.isNonprod) {
+        path = "./.env.nonprod";
+      }
+      console.log(`Using '${path}' for build variables.`)
+      return path;
+    })(),
+  }),
+];
+
+const devPlugins = [
+  new ProgressPlugin(),
+  !config.isProd &&
+    new ReactRefreshWebpackPlugin({
+      overlay: false,
+    }),
+].filter((_) => _);
+
+export { basePlugins, devPlugins };

webpack/options/rules.js

@@ -0,0 +1,56 @@
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+
+import config from "../config";
+
+const styleRules = [
+  {
+    loader: config.isProd ? MiniCssExtractPlugin.loader : "style-loader",
+    options: {
+      esModule: false,
+    },
+  },
+  { loader: "css-loader" },
+  { loader: "postcss-loader" },
+];
+
+export default [
+  {
+    test: /\.(ts|tsx)$/,
+    exclude: /node_modules/,
+    use: {
+      loader: "esbuild-loader",
+      options: {
+        loader: "tsx",
+        target: "es2015",
+      },
+    },
+  },
+  {
+    test: /\.html$/,
+    exclude: /node_modules/,
+    use: {
+      loader: "html-loader",
+    },
+  },
+  {
+    test: /\.(gif|png|jpg|jpeg|webp)$/i,
+    exclude: /node_modules/,
+    type: "asset/resource",
+  },
+  {
+    test: /\.(woff(2)?|eot|ttf|otf|)$/,
+    exclude: /node_modules/,
+    type: "asset/inline",
+  },
+  {
+    test: /\.s([ca])ss$/,
+    use: [
+      ...styleRules,
+      { loader: "fast-sass-loader" },
+    ],
+  },
+  {
+    test: /\.css$/,
+    use: styleRules,
+  },
+];