@vyriy/webpack-config 0.1.18 → 0.1.21

package/README.md

@@ -20,7 +20,7 @@ With Yarn:
 yarn add @vyriy/webpack-config webpack webpack-cli
 ```
 
-Install `webpack` and `webpack-cli` in the consumer project so Webpack CLI commands are available.
+The `webpack` package is listed in the install command because the shared config is consumed by Webpack at build time. Add `webpack-cli` only when the consumer project runs Webpack through CLI commands.
 
 ## Usage
 
@@ -51,7 +51,7 @@ export default ssr(['@w/api'], {
 
 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:
+Both generators accept a third parameter with a local Webpack config transform. The transform receives the shared config and returns the final config, so the consumer can choose where to extend defaults and where to replace them:
 
 ```js
 import { csr } from '@vyriy/webpack-config';
@@ -63,11 +63,35 @@ export default csr(
     filename: 'index.js',
     clean: true,
   },
-  {
+  (config) => ({
+    ...config,
     optimization: {
+      ...config.optimization,
       splitChunks: true,
     },
+  }),
+);
+```
+
+For example, append a local CSR plugin while keeping the shared CSR plugin:
+
+```js
+import { csr } from '@vyriy/webpack-config';
+
+export default csr(
+  './src/index.tsx',
+  {
+    path: '/absolute/path/to/dist/client',
+    filename: 'index.js',
+    clean: true,
   },
+  (config) => ({
+    ...config,
+    plugins: [
+      ...(config.plugins ?? []),
+      new LocalPlugin(),
+    ],
+  }),
 );
 ```
 
@@ -87,9 +111,9 @@ export default config;
 
 ## API
 
-- `csr(entry, output, config?)` creates a browser-oriented Webpack config.
-- `ssr(entry, output, config?)` creates a node-oriented SSR Webpack config.
-- `WebpackConfig`, `WebpackEntry`, and `WebpackOutput` expose the shared config helper types.
+- `csr(entry, output, transform?)` creates a browser-oriented Webpack config.
+- `ssr(entry, output, transform?)` creates a node-oriented SSR Webpack config.
+- `WebpackConfig`, `WebpackConfigTransform`, `WebpackEntry`, and `WebpackOutput` expose the shared config helper types.
 
 Shared defaults:
 

package/csr.d.ts

@@ -1,2 +1,2 @@
-import type { WebpackConfig, WebpackEntry, WebpackOutput } from './types.js';
-export declare const csr: (entry: WebpackEntry, output: WebpackOutput, config?: WebpackConfig) => WebpackConfig;
+import type { WebpackConfig, WebpackConfigTransform, WebpackEntry, WebpackOutput } from './types.js';
+export declare const csr: (entry: WebpackEntry, output: WebpackOutput, transform?: WebpackConfigTransform) => WebpackConfig;

package/csr.js

@@ -6,7 +6,7 @@ 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 = {}) => {
+export const csr = (entry, output, transform) => {
     const webpackMode = mode();
     const isProduction = webpackMode === 'production';
     const base = {
@@ -22,28 +22,7 @@ export const csr = (entry, output, config = {}) => {
         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),
+        resolve: resolve(),
     };
+    return transform ? transform(base) : base;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vyriy/webpack-config",
-  "version": "0.1.18",
+  "version": "0.1.21",
   "description": "Shared Webpack config for Vyriy projects",
   "type": "module",
   "main": "./index.js",
@@ -12,8 +12,8 @@
     "@babel/preset-typescript": "^7.28.5",
     "@babel/runtime": "^7.29.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
-    "@vyriy/env": "0.1.18",
-    "@vyriy/path": "0.1.18",
+    "@vyriy/env": "0.1.21",
+    "@vyriy/path": "0.1.21",
     "babel-loader": "^10.1.1",
     "css-loader": "^7.1.4",
     "cssnano": "^8.0.1",
@@ -27,8 +27,7 @@
     "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"
+    "webpack": "^5.106.2"
   },
   "license": "MIT",
   "repository": {

package/ssr.d.ts

@@ -1,2 +1,2 @@
-import type { WebpackConfig, WebpackEntry, WebpackOutput } from './types.js';
-export declare const ssr: (entry: WebpackEntry, output: WebpackOutput, config?: WebpackConfig) => WebpackConfig;
+import type { WebpackConfig, WebpackConfigTransform, WebpackEntry, WebpackOutput } from './types.js';
+export declare const ssr: (entry: WebpackEntry, output: WebpackOutput, transform?: WebpackConfigTransform) => WebpackConfig;

package/ssr.js

@@ -3,7 +3,7 @@ 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 = {}) => {
+export const ssr = (entry, output, transform) => {
     const webpackMode = mode();
     const isProduction = webpackMode === 'production';
     const base = {
@@ -17,28 +17,7 @@ export const ssr = (entry, output, config = {}) => {
         },
         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),
+        resolve: resolve(),
     };
+    return transform ? transform(base) : base;
 };

package/types.d.ts

@@ -2,3 +2,4 @@ import type { Configuration } from 'webpack';
 export type WebpackConfig = Configuration;
 export type WebpackEntry = WebpackConfig['entry'];
 export type WebpackOutput = WebpackConfig['output'];
+export type WebpackConfigTransform = (config: WebpackConfig) => WebpackConfig;