fix: support file protocol in configuration options

Author: alexander-akait

.changeset/slow-oranges-repair.md

@@ -0,0 +1,5 @@
+---
+"webpack-cli": patch
+---
+
+The `file` protocol for configuration options (`--config`/`--extends`) is supported.

packages/webpack-cli/src/webpack-cli.ts

@@ -1,7 +1,7 @@
 import fs from "node:fs";
 import path from "node:path";
 import { type Readable as ReadableType } from "node:stream";
-import { pathToFileURL } from "node:url";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import util from "node:util";
 import { type stringifyChunked as stringifyChunkedType } from "@discoveryjs/json-ext";
 import {
@@ -2163,12 +2163,14 @@ class WebpackCLI {
     ): Promise<{ options: Configuration | MultiConfiguration; path: string }> => {
       let options: LoadableWebpackConfiguration | undefined;
 
+      const isFileURL = configPath.startsWith("file://");
+
       try {
         let loadingError;
 
         try {
-          // eslint-disable-next-line no-eval
-          options = (await eval(`import("${pathToFileURL(configPath)}")`)).default;
+          options = // eslint-disable-next-line no-eval
+            (await eval(`import("${isFileURL ? configPath : pathToFileURL(configPath)}")`)).default;
         } catch (err) {
           if (this.isValidationError(err) || process.env?.WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG) {
             throw err;
@@ -2209,7 +2211,7 @@ class WebpackCLI {
           }
 
           try {
-            options = require(configPath);
+            options = require(isFileURL ? fileURLToPath(configPath) : configPath);
           } catch (err) {
             if (this.isValidationError(err)) {
               throw err;
@@ -2301,9 +2303,7 @@ class WebpackCLI {
 
     if (options.config && options.config.length > 0) {
       const loadedConfigs = await Promise.all(
-        options.config.map((configPath: string) =>
-          loadConfigByPath(path.resolve(configPath), options.argv),
-        ),
+        options.config.map((configPath: string) => loadConfigByPath(configPath, options.argv)),
       );
 
       if (loadedConfigs.length === 1) {
@@ -2406,9 +2406,7 @@ class WebpackCLI {
       delete config.extends;
 
       const loadedConfigs = await Promise.all(
-        extendsPaths.map((extendsPath) =>
-          loadConfigByPath(path.resolve(extendsPath), options.argv),
-        ),
+        extendsPaths.map((extendsPath) => loadConfigByPath(extendsPath, options.argv)),
       );
 
       const { merge } = await import("webpack-merge");

test/build/config/basic/basic-config.test.js

@@ -1,13 +1,31 @@
 "use strict";
 
 const { resolve } = require("node:path");
+const { pathToFileURL } = require("node:url");
 const { run } = require("../../../utils/test-utils");
 
 describe("basic config file", () => {
-  it("should build and not throw error with a basic configuration file", async () => {
+  it("should build and not throw error with a basic configuration file using relative path", async () => {
+    const { exitCode, stderr, stdout } = await run(__dirname, ["-c", "webpack.config.js"]);
+    expect(exitCode).toBe(0);
+    expect(stderr).toBeFalsy();
+    expect(stdout).toBeTruthy();
+  });
+
+  it("should build and not throw error with a basic configuration file using absolute path", async () => {
     const { exitCode, stderr, stdout } = await run(__dirname, [
       "-c",
       resolve(__dirname, "webpack.config.js"),
+    ]);
+    expect(exitCode).toBe(0);
+    expect(stderr).toBeFalsy();
+    expect(stdout).toBeTruthy();
+  });
+
+  it("should build and not throw error with a basic configuration file using file protocol", async () => {
+    const { exitCode, stderr, stdout } = await run(__dirname, [
+      "-c",
+      pathToFileURL(resolve(__dirname, "webpack.config.js")).toString(),
       "--output-path",
       "./binary",
     ]);

test/build/extends/extends.test.js

@@ -1,6 +1,7 @@
 "use strict";
 
 const path = require("node:path");
+const { pathToFileURL } = require("node:url");
 const { run } = require("../../utils/test-utils");
 
 describe("extends property", () => {
@@ -15,6 +16,38 @@ describe("extends property", () => {
     expect(stdout).toContain("mode: 'development'");
   });
 
+  it("extends a provided webpack config correctly using file protocol", async () => {
+    const { exitCode, stderr, stdout } = await run(path.resolve(__dirname, "./file-protocol"));
+
+    expect(exitCode).toBe(0);
+    expect(stderr).toBeFalsy();
+    expect(stdout).toContain("base.webpack.config.js");
+    expect(stdout).toContain("derived.webpack.config.js");
+    expect(stdout).toContain("name: 'base_config'");
+    expect(stdout).toContain("mode: 'development'");
+  });
+
+  it("extends a provided webpack config correctly using `require.resolve`", async () => {
+    const { exitCode, stderr, stdout } = await run(path.resolve(__dirname, "./require-resolve"));
+
+    expect(exitCode).toBe(0);
+    expect(stderr).toBeFalsy();
+    expect(stdout).toContain("base.webpack.config.js");
+    expect(stdout).toContain("derived.webpack.config.js");
+    expect(stdout).toContain("name: 'base_config'");
+    expect(stdout).toContain("mode: 'development'");
+  });
+
+  it("extends a provided webpack config correctly using `JSON` format", async () => {
+    const { exitCode, stderr, stdout } = await run(path.resolve(__dirname, "./json"));
+
+    expect(exitCode).toBe(0);
+    expect(stderr).toBeFalsy();
+    expect(stdout).toContain("derived.webpack.config.js");
+    expect(stdout).toContain("name: 'base_config'");
+    expect(stdout).toContain("mode: 'development'");
+  });
+
   it("extends a provided array of webpack configs correctly", async () => {
     const { exitCode, stderr, stdout } = await run(path.resolve(__dirname, "./multiple-extends"));
 
@@ -89,7 +122,7 @@ describe("extends property", () => {
       "--extends",
       "./base.webpack.config.js",
       "--extends",
-      "./other.config.js",
+      path.resolve(__dirname, "./multiple-configs1/other.config.js"),
     ]);
 
     expect(exitCode).toBe(0);
@@ -102,7 +135,7 @@ describe("extends property", () => {
     expect(stdout).toContain("topLevelAwait: true");
   });
 
-  it("cLI `extends` should override `extends` in a configuration", async () => {
+  it("`extends` should override `extends` in a configuration", async () => {
     const { exitCode, stderr, stdout } = await run(path.resolve(__dirname, "./simple-case"), [
       "--extends",
       "./override.config.js",
@@ -116,6 +149,20 @@ describe("extends property", () => {
     expect(stdout).toContain("mode: 'development'");
   });
 
+  it("`extends` should override `extends` in a configuration using file protocol", async () => {
+    const { exitCode, stderr, stdout } = await run(path.resolve(__dirname, "./simple-case"), [
+      "--extends",
+      pathToFileURL(path.resolve(__dirname, "./simple-case/override.config.js")).toString(),
+    ]);
+
+    expect(exitCode).toBe(0);
+    expect(stderr).toBeFalsy();
+    expect(stdout).toContain("override.config.js");
+    expect(stdout).toContain("derived.webpack.config.js");
+    expect(stdout).toContain("name: 'override_config'");
+    expect(stdout).toContain("mode: 'development'");
+  });
+
   it("should throw an error on recursive", async () => {
     const { exitCode, stderr, stdout } = await run(path.resolve(__dirname, "./recursive-extends"));
 

test/build/extends/file-protocol/base.webpack.config.mjs

@@ -0,0 +1,9 @@
+export default () => {
+  console.log("base.webpack.config.js");
+
+  return {
+    name: "base_config",
+    mode: "development",
+    entry: "./src/index.js",
+  };
+};

test/build/extends/file-protocol/override.config.mjs

@@ -0,0 +1,9 @@
+export default () => {
+  console.log("override.config.js");
+
+  return {
+    name: "override_config",
+    mode: "development",
+    entry: "./src/index.js",
+  };
+};

test/build/extends/file-protocol/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "test",
+  "version": "1.0.0",
+  "type": "module"
+}

test/build/extends/file-protocol/src/index.js

@@ -0,0 +1 @@
+console.log("index.js")

test/build/extends/file-protocol/webpack.config.mjs

@@ -0,0 +1,10 @@
+import WebpackCLITestPlugin from "../../../utils/webpack-cli-test-plugin.js";
+
+export default () => {
+  console.log("derived.webpack.config.js");
+
+  return {
+    extends: [import.meta.resolve("./base.webpack.config.mjs")],
+    plugins: [new WebpackCLITestPlugin()],
+  };
+};

test/build/extends/json/base.webpack.config.json

@@ -0,0 +1,5 @@
+{
+  "name": "base_config",
+  "mode": "development",
+  "entry": "./src/index.js"
+}