@vyriy/webpack-config 0.1.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vyriy contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,85 @@
+# @vyriy/webpack-config
+
+Shared Webpack config for Vyriy projects.
+
+## Purpose
+
+This package provides two small typed Webpack config generators for Vyriy client and server builds.
+
+## Install
+
+With npm:
+
+```bash
+npm install @vyriy/webpack-config webpack webpack-cli
+```
+
+With Yarn:
+
+```bash
+yarn add @vyriy/webpack-config webpack webpack-cli
+```
+
+Install `webpack` and `webpack-cli` in the consumer project so Webpack CLI commands are available.
+
+## Usage
+
+For client bundles:
+
+```js
+import { csr } from '@vyriy/webpack-config';
+
+export default csr('./src/index.tsx', {
+  path: '/absolute/path/to/dist/client',
+  filename: 'index.js',
+  clean: true,
+});
+```
+
+For SSR bundles:
+
+```js
+import { ssr } from '@vyriy/webpack-config';
+
+export default ssr(['@w/api'], {
+  path: '/absolute/path/to/dist/api',
+  filename: 'index.js',
+  library: { type: 'commonjs2' },
+  clean: true,
+});
+```
+
+The second parameter is a regular Webpack `output` config passed as-is.
+
+Both generators accept a third parameter with local Webpack overrides that are merged over the shared defaults:
+
+```js
+import { csr } from '@vyriy/webpack-config';
+
+export default csr(
+  './src/index.tsx',
+  {
+    path: '/absolute/path/to/dist/client',
+    filename: 'index.js',
+    clean: true,
+  },
+  {
+    output: {
+      filename: 'app.js',
+    },
+  },
+);
+```
+
+## API
+
+- `csr(entry, output, config?)` creates a browser-oriented Webpack config.
+- `ssr(entry, output, config?)` creates a node-oriented SSR Webpack config.
+
+Shared defaults:
+
+- `devtool: false`
+- `mode`: `production` when `NODE_ENV=production`, otherwise `development`
+- `performance.hints: false`
+- production `optimization` with `TerserPlugin`
+- merged `resolve` defaults

package/babel.d.ts

@@ -0,0 +1,2 @@
+import type { TransformOptions } from '@babel/core';
+export declare const babel: (isSsr?: boolean, isProduction?: boolean) => TransformOptions;

package/babel.js

@@ -0,0 +1,33 @@
+export const babel = (isSsr = false, isProduction = true) => {
+    const isClientDevelopment = !isProduction && !isSsr;
+    const envOptions = {
+        bugfixes: true,
+        modules: false,
+        ...(isSsr ? { targets: { node: 'current' } } : {}),
+    };
+    return {
+        presets: [
+            [
+                '@babel/preset-env',
+                envOptions,
+            ],
+            [
+                '@babel/preset-react',
+                {
+                    runtime: 'automatic',
+                    development: !isProduction,
+                },
+            ],
+            '@babel/preset-typescript',
+        ],
+        plugins: [
+            [
+                '@babel/plugin-transform-runtime',
+                {
+                    regenerator: true,
+                },
+            ],
+            ...(isClientDevelopment ? ['react-refresh/babel'] : []),
+        ],
+    };
+};

package/csr.d.ts

@@ -0,0 +1,2 @@
+import type { Configuration } from 'webpack';
+export declare const csr: (entry: Configuration["entry"], output: Configuration["output"], config?: Configuration) => Configuration;

package/csr.js

@@ -0,0 +1,49 @@
+import { path } from '@vyriy/path';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { mode } from './mode.js';
+import { optimization } from './optimization.js';
+import { performance } from './performance.js';
+import { resolve } from './resolve.js';
+import { rules } from './rules.js';
+export const csr = (entry, output, config = {}) => {
+    const webpackMode = mode();
+    const isProduction = webpackMode === 'production';
+    const base = {
+        context: path(),
+        devtool: false,
+        mode: webpackMode,
+        target: isProduction ? 'browserslist' : 'web',
+        entry,
+        output,
+        module: {
+            rules: rules(false, isProduction),
+        },
+        optimization: optimization(isProduction),
+        performance,
+        plugins: isProduction ? [new MiniCssExtractPlugin()] : [new ReactRefreshWebpackPlugin()],
+        resolve: resolve(config.resolve),
+    };
+    return {
+        ...base,
+        ...config,
+        output: {
+            ...base.output,
+            ...config.output,
+        },
+        module: {
+            ...base.module,
+            ...config.module,
+            rules: config.module?.rules ?? base.module?.rules,
+        },
+        optimization: base.optimization
+            ? {
+                ...base.optimization,
+                ...config.optimization,
+            }
+            : config.optimization,
+        performance: config.performance ?? performance,
+        plugins: config.plugins ?? base.plugins,
+        resolve: resolve(config.resolve),
+    };
+};

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './csr.js';
+export * from './ssr.js';

package/index.js

@@ -0,0 +1,2 @@
+export * from './csr.js';
+export * from './ssr.js';

package/mode.d.ts

@@ -0,0 +1,2 @@
+import type { Configuration } from 'webpack';
+export declare const mode: () => Configuration["mode"];

package/mode.js

@@ -0,0 +1,2 @@
+import { isNodeEnvProduction } from '@vyriy/env';
+export const mode = () => (isNodeEnvProduction() ? 'production' : 'development');

package/optimization.d.ts

@@ -0,0 +1,2 @@
+import type { Configuration } from 'webpack';
+export declare const optimization: (isProduction?: boolean) => Configuration["optimization"] | undefined;

package/optimization.js

@@ -0,0 +1,17 @@
+import TerserPlugin from 'terser-webpack-plugin';
+export const optimization = (isProduction = true) => isProduction
+    ? {
+        minimize: true,
+        splitChunks: false,
+        minimizer: [
+            new TerserPlugin({
+                extractComments: false,
+                terserOptions: {
+                    format: {
+                        comments: false,
+                    },
+                },
+            }),
+        ],
+    }
+    : undefined;

package/package.json

@@ -0,0 +1,142 @@
+{
+  "name": "@vyriy/webpack-config",
+  "version": "0.1.9",
+  "description": "Shared Webpack config for Vyriy projects",
+  "type": "module",
+  "main": "./index.js",
+  "dependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/plugin-transform-runtime": "^7.29.0",
+    "@babel/preset-env": "^7.29.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@babel/runtime": "^7.29.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
+    "@vyriy/env": "0.1.9",
+    "@vyriy/path": "0.1.9",
+    "babel-loader": "^10.1.1",
+    "css-loader": "^7.1.4",
+    "cssnano": "^8.0.1",
+    "mini-css-extract-plugin": "^2.10.2",
+    "null-loader": "^4.0.1",
+    "postcss": "^8.5.14",
+    "postcss-loader": "^8.2.1",
+    "postcss-preset-env": "^11.2.1",
+    "react-refresh": "^0.18.0",
+    "sass": "^1.99.0",
+    "sass-loader": "^16.0.8",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.6.0",
+    "webpack": "^5.106.2",
+    "webpack-cli": "^7.0.2"
+  },
+  "license": "MIT",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./babel": {
+      "types": "./babel.d.ts",
+      "import": "./babel.js",
+      "default": "./babel.js"
+    },
+    "./babel.js": {
+      "types": "./babel.d.ts",
+      "import": "./babel.js",
+      "default": "./babel.js"
+    },
+    "./csr": {
+      "types": "./csr.d.ts",
+      "import": "./csr.js",
+      "default": "./csr.js"
+    },
+    "./csr.js": {
+      "types": "./csr.d.ts",
+      "import": "./csr.js",
+      "default": "./csr.js"
+    },
+    "./index": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./index.js": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./mode": {
+      "types": "./mode.d.ts",
+      "import": "./mode.js",
+      "default": "./mode.js"
+    },
+    "./mode.js": {
+      "types": "./mode.d.ts",
+      "import": "./mode.js",
+      "default": "./mode.js"
+    },
+    "./optimization": {
+      "types": "./optimization.d.ts",
+      "import": "./optimization.js",
+      "default": "./optimization.js"
+    },
+    "./optimization.js": {
+      "types": "./optimization.d.ts",
+      "import": "./optimization.js",
+      "default": "./optimization.js"
+    },
+    "./performance": {
+      "types": "./performance.d.ts",
+      "import": "./performance.js",
+      "default": "./performance.js"
+    },
+    "./performance.js": {
+      "types": "./performance.d.ts",
+      "import": "./performance.js",
+      "default": "./performance.js"
+    },
+    "./postcss": {
+      "types": "./postcss.d.ts",
+      "import": "./postcss.js",
+      "default": "./postcss.js"
+    },
+    "./postcss.js": {
+      "types": "./postcss.d.ts",
+      "import": "./postcss.js",
+      "default": "./postcss.js"
+    },
+    "./resolve": {
+      "types": "./resolve.d.ts",
+      "import": "./resolve.js",
+      "default": "./resolve.js"
+    },
+    "./resolve.js": {
+      "types": "./resolve.d.ts",
+      "import": "./resolve.js",
+      "default": "./resolve.js"
+    },
+    "./rules": {
+      "types": "./rules.d.ts",
+      "import": "./rules.js",
+      "default": "./rules.js"
+    },
+    "./rules.js": {
+      "types": "./rules.d.ts",
+      "import": "./rules.js",
+      "default": "./rules.js"
+    },
+    "./ssr": {
+      "types": "./ssr.d.ts",
+      "import": "./ssr.js",
+      "default": "./ssr.js"
+    },
+    "./ssr.js": {
+      "types": "./ssr.d.ts",
+      "import": "./ssr.js",
+      "default": "./ssr.js"
+    }
+  }
+}

package/performance.d.ts

@@ -0,0 +1,2 @@
+import type { Configuration } from 'webpack';
+export declare const performance: Configuration['performance'];

package/performance.js

@@ -0,0 +1,3 @@
+export const performance = {
+    hints: false,
+};

package/postcss.d.ts

@@ -0,0 +1,5 @@
+import type { AcceptedPlugin, ProcessOptions } from 'postcss';
+export type PostcssConfig = ProcessOptions & {
+    plugins: AcceptedPlugin[];
+};
+export declare const postcss: (config?: Partial<PostcssConfig>) => PostcssConfig;

package/postcss.js

@@ -0,0 +1,26 @@
+import cssnano from 'cssnano';
+import postcssPresetEnv from 'postcss-preset-env';
+const DEFAULT_PLUGINS = [
+    postcssPresetEnv({
+        stage: 3,
+        autoprefixer: {
+            flexbox: 'no-2009',
+        },
+    }),
+    cssnano({
+        preset: [
+            'default',
+            {
+                cssDeclarationSorter: false,
+                zindex: false,
+            },
+        ],
+    }),
+];
+export const postcss = (config = {}) => ({
+    ...config,
+    plugins: [
+        ...DEFAULT_PLUGINS,
+        ...(config.plugins ?? []),
+    ],
+});

package/resolve.d.ts

@@ -0,0 +1,2 @@
+import type { Configuration } from 'webpack';
+export declare const resolve: (config?: Configuration["resolve"]) => Configuration["resolve"];

package/resolve.js

@@ -0,0 +1,35 @@
+const BASE_EXTENSION_ALIAS = {
+    '.js': [
+        '.ts',
+        '.tsx',
+        '.js',
+    ],
+    '.mjs': [
+        '.mts',
+        '.mjs',
+    ],
+    '.cjs': [
+        '.cts',
+        '.cjs',
+    ],
+};
+const BASE_EXTENSIONS = [
+    '.tsx',
+    '.ts',
+    '.jsx',
+    '.js',
+    '.mjs',
+    '.cjs',
+    '.json',
+];
+export const resolve = (config = {}) => ({
+    ...config,
+    extensionAlias: {
+        ...BASE_EXTENSION_ALIAS,
+        ...config.extensionAlias,
+    },
+    extensions: [
+        ...BASE_EXTENSIONS,
+        ...(config.extensions ?? []),
+    ],
+});

package/rules.d.ts

@@ -0,0 +1,4 @@
+import type { RuleSetRule } from 'webpack';
+export declare const SCRIPT_TEST: RegExp;
+export declare const STYLE_TEST: RegExp;
+export declare const rules: (isSsr?: boolean, isProduction?: boolean) => RuleSetRule[];

package/rules.js

@@ -0,0 +1,31 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { babel } from './babel.js';
+import { postcss } from './postcss.js';
+export const SCRIPT_TEST = /\.(mjs|cjs|js|jsx|mts|cts|ts|tsx)$/;
+export const STYLE_TEST = /\.(css|scss|sass)$/;
+export const rules = (isSsr = false, isProduction = true) => [
+    {
+        test: SCRIPT_TEST,
+        exclude: /node_modules/,
+        use: {
+            loader: 'babel-loader',
+            options: babel(isSsr, isProduction),
+        },
+    },
+    {
+        test: STYLE_TEST,
+        use: isSsr
+            ? ['null-loader']
+            : [
+                isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
+                'css-loader',
+                {
+                    loader: 'postcss-loader',
+                    options: {
+                        postcssOptions: postcss(),
+                    },
+                },
+                'sass-loader',
+            ],
+    },
+];

package/ssr.d.ts

@@ -0,0 +1,2 @@
+import type { Configuration } from 'webpack';
+export declare const ssr: (entry: Configuration["entry"], output: Configuration["output"], config?: Configuration) => Configuration;

package/ssr.js

@@ -0,0 +1,44 @@
+import { mode } from './mode.js';
+import { optimization } from './optimization.js';
+import { performance } from './performance.js';
+import { resolve } from './resolve.js';
+import { rules } from './rules.js';
+export const ssr = (entry, output, config = {}) => {
+    const webpackMode = mode();
+    const isProduction = webpackMode === 'production';
+    const base = {
+        devtool: false,
+        mode: webpackMode,
+        target: 'node',
+        entry,
+        output,
+        module: {
+            rules: rules(true, isProduction),
+        },
+        optimization: optimization(isProduction),
+        performance,
+        resolve: resolve(config.resolve),
+    };
+    return {
+        ...base,
+        ...config,
+        output: {
+            ...base.output,
+            ...config.output,
+            library: config.output?.library ?? base.output?.library,
+        },
+        module: {
+            ...base.module,
+            ...config.module,
+            rules: config.module?.rules ?? base.module?.rules,
+        },
+        optimization: base.optimization
+            ? {
+                ...base.optimization,
+                ...config.optimization,
+            }
+            : config.optimization,
+        performance: config.performance ?? performance,
+        resolve: resolve(config.resolve),
+    };
+};