Initial commit

webpack/base.config.ts

@@ -0,0 +1,127 @@
+import path from "path"
+import webpack, { Configuration, WebpackPluginInstance, RuleSetUseItem } from "webpack"
+import { WebpackManifestPlugin } from "webpack-manifest-plugin"
+import TerserPlugin from "terser-webpack-plugin"
+import MiniCssExtractPlugin from "mini-css-extract-plugin"
+import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin"
+import LoadablePlugin from "@loadable/webpack-plugin"
+import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer"
+
+export const isDev = process.env.NODE_ENV === "development"
+
+const getStyleLoaders = (isWeb: boolean, isSass?: boolean) => {
+    let loaders: RuleSetUseItem[] = [
+        {
+            loader: "css-loader",
+            options: {
+                importLoaders: isSass ? 2 : 1,
+                modules: {
+                    auto: true,
+                    localIdentName: isDev ? "[path][name]__[local]" : "[hash:base64]",
+                    exportOnlyLocals: !isWeb,
+                },
+            },
+        },
+        { loader: "postcss-loader" },
+    ]
+
+    if (isWeb) loaders = [MiniCssExtractPlugin.loader, ...loaders]
+
+    if (isSass) loaders = [...loaders, { loader: "sass-loader" }]
+
+    return loaders
+}
+
+const getPlugins = (isWeb: boolean) => {
+    let plugins = [
+        new webpack.ProgressPlugin(),
+        new WebpackManifestPlugin({
+            fileName: path.resolve(process.cwd(), "public/webpack-assets.json"),
+            filter: (file) => file.isInitial,
+        }),
+        new LoadablePlugin({
+            writeToDisk: true,
+            filename: "../loadable-stats.json",
+        }),
+        // Setting global variables
+        new webpack.DefinePlugin({
+            __CLIENT__: isWeb,
+            __SERVER__: !isWeb,
+            __DEV__: isDev,
+        }),
+    ]
+
+    if (isDev)
+        plugins = [
+            ...plugins,
+            // Runs TypeScript type checker on a separate process
+            new ForkTsCheckerWebpackPlugin({
+                // (Required) Same as eslint command
+                eslint: { files: "./src/**/*.{js,jsx,ts,tsx}" },
+            }),
+        ]
+
+    if (!isDev)
+        plugins = [
+            ...plugins,
+            // Visualize size of webpack output files, see: https://github.com/webpack-contrib/webpack-bundle-analyzer
+            new BundleAnalyzerPlugin({
+                analyzerMode: process.env.NODE_ENV === "analyze" ? "server" : "disabled",
+            }),
+        ]
+
+    return plugins
+}
+
+const config = (isWeb = false): Configuration => ({
+    mode: isDev ? "development" : "production",
+    stats: "minimal",
+    context: path.resolve(process.cwd()),
+    output: { clean: true },
+    optimization: {
+        minimizer: [
+            new TerserPlugin({
+                // See more options: https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+                terserOptions: { compress: { drop_console: true } },
+            }),
+        ],
+    },
+    plugins: getPlugins(isWeb) as WebpackPluginInstance[],
+    module: {
+        rules: [
+            {
+                test: /\.(t|j)sx?$/,
+                exclude: /node_modules/,
+                loader: "babel-loader",
+                options: {
+                    caller: { target: isWeb ? "web" : "node" },
+                    cacheDirectory: isDev,
+                },
+            },
+            {
+                test: /\.css$/,
+                use: getStyleLoaders(isWeb),
+            },
+            {
+                test: /\.(scss|sass)$/,
+                use: getStyleLoaders(isWeb, true),
+            },
+            {
+                test: /\.(woff2?|eot|ttf|otf)$/i,
+                type: "asset",
+                generator: { emit: isWeb },
+            },
+            {
+                test: /\.(png|svg|jpe?g|gif)$/i,
+                type: "asset",
+                generator: { emit: isWeb },
+            },
+        ],
+    },
+    resolve: {
+        modules: ["src", "node_modules"],
+        extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
+    },
+})
+
+export default config

webpack/client.config.ts

@@ -0,0 +1,58 @@
+import path from "path"
+import webpack, { Configuration } from "webpack"
+import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"
+import MiniCssExtractPlugin from "mini-css-extract-plugin"
+import CssMinimizerPlugin from "css-minimizer-webpack-plugin"
+import CompressionPlugin from "compression-webpack-plugin"
+import ImageMinimizerPlugin from "image-minimizer-webpack-plugin"
+import merge from "webpack-merge"
+
+import baseConfig, { isDev } from "./base.config"
+
+const getPlugins = () => {
+    let plugins = [
+        new MiniCssExtractPlugin({
+            // Don't use hash in development, we need the persistent for "renderHtml.ts"
+            filename: isDev ? "[name].css" : "[name].[contenthash].css",
+            chunkFilename: isDev ? "[id].css" : "[id].[contenthash].css",
+        }),
+    ]
+
+    if (isDev)
+        plugins = [
+            ...plugins,
+            new webpack.HotModuleReplacementPlugin(),
+            new ReactRefreshWebpackPlugin({ overlay: { sockIntegration: "whm" } }),
+        ]
+
+    if (!isDev)
+        plugins = [
+            ...plugins,
+            // Prepare compressed versions of assets to serve them with Content-Encoding
+            new CompressionPlugin(),
+            new ImageMinimizerPlugin({
+                // Lossless optimization with default option, feel free to experiment with options for better result for you
+                // See https://github.com/webpack-contrib/image-minimizer-webpack-plugin#getting-started
+                minimizerOptions: {
+                    plugins: [["gifsicle"], ["jpegtran"], ["optipng"], ["svgo"]],
+                },
+            }),
+        ]
+
+    return plugins
+}
+
+const config: Configuration = {
+    devtool: isDev ? "inline-source-map" : "hidden-source-map",
+    entry: isDev ? ["webpack-hot-middleware/client?reload=true", "./src/client"] : "./src/client",
+    output: {
+        filename: isDev ? "[name].js" : "[name].[contenthash].js",
+        chunkFilename: isDev ? "[id].js" : "[id].[contenthash].js",
+        path: path.resolve(process.cwd(), "public/assets"),
+        publicPath: "/assets/",
+    },
+    optimization: { minimizer: [new CssMinimizerPlugin()] },
+    plugins: getPlugins(),
+}
+
+export default merge(baseConfig(true), config)

webpack/server.config.ts

@@ -0,0 +1,35 @@
+import path from "path"
+import webpack, { Configuration } from "webpack"
+import nodeExternals from "webpack-node-externals"
+import merge from "webpack-merge"
+
+import baseConfig, { isDev } from "./base.config"
+
+const config: Configuration = {
+    target: "node",
+    devtool: isDev ? "inline-source-map" : "source-map",
+    entry: "./src/server",
+    output: {
+        filename: "index.js",
+        chunkFilename: "[id].js",
+        path: path.resolve(process.cwd(), "public/server"),
+        libraryTarget: "commonjs2",
+    },
+    node: { __dirname: true, __filename: true },
+    externals: [
+        "@loadable/component",
+        nodeExternals({
+            // Load non-javascript files with extensions, presumably via loaders
+            allowlist: [/\.(?!(?:jsx?|json)$).{1,5}$/i],
+        }),
+    ],
+    plugins: [
+        // Adding source map support to node.js (for stack traces)
+        new webpack.BannerPlugin({
+            banner: 'require("source-map-support").install();',
+            raw: true,
+        }),
+    ],
+}
+
+export default merge(baseConfig(false), config)