fix: regression for custom configurations (#3834)

Author: alexander-akait

package.json

@@ -53,6 +53,9 @@
     "webpack": "5.x.x"
   },
   "devDependencies": {
+    "@babel/core": "^7.22.1",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/register": "^7.15.8",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@types/jest": "^29.4.0",

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

@@ -1802,8 +1802,7 @@ class WebpackCLI implements IWebpackCLI {
     const interpret = require("interpret");
     const loadConfigByPath = async (configPath: string, argv: Argv = {}) => {
       const ext = path.extname(configPath).toLowerCase();
-      let interpreted = interpret.jsVariants[ext];
-
+      let interpreted = Object.keys(interpret.jsVariants).find((variant) => variant === ext);
       // Fallback `.cts` to `.ts`
       // TODO implement good `.mts` support after https://github.com/gulpjs/rechoir/issues/43
       // For ESM and `.mts` you need to use: 'NODE_OPTIONS="--loader ts-node/esm" webpack-cli --config ./webpack.config.mts'

test/build/config-format/babel-commonjs/babel-esm.test.js

@@ -0,0 +1,14 @@
+// eslint-disable-next-line node/no-unpublished-require
+const { run } = require("../../../utils/test-utils");
+
+describe("webpack cli", () => {
+  it("should support mjs config format", async () => {
+    const { exitCode, stderr, stdout } = await run(__dirname, ["-c", "webpack.config.babel.js"]);
+
+    console.log(stderr);
+
+    expect(exitCode).toBe(0);
+    expect(stderr).toBeFalsy();
+    expect(stdout).toBeTruthy();
+  });
+});

test/build/config-format/babel-commonjs/main.js

@@ -0,0 +1 @@
+console.log("You know who");

test/build/config-format/babel-commonjs/package.json

@@ -0,0 +1,5 @@
+{
+  "engines": {
+    "node": ">=14.15.0"
+  }
+}

test/build/config-format/babel-commonjs/webpack.config.babel.js

@@ -0,0 +1,10 @@
+const path = require("path");
+
+module.exports = {
+  mode: "development",
+  entry: "./main.js",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "foo.bundle.js",
+  },
+};

test/build/config-format/babel-esm/babel-esm.test.js

@@ -0,0 +1,12 @@
+// eslint-disable-next-line node/no-unpublished-require
+const { run } = require("../../../utils/test-utils");
+
+describe("webpack cli", () => {
+  it("should support mjs config format", async () => {
+    const { exitCode, stderr, stdout } = await run(__dirname, ["-c", "webpack.config.babel.js"]);
+
+    expect(exitCode).toBe(0);
+    expect(stderr).toBeFalsy();
+    expect(stdout).toBeTruthy();
+  });
+});

test/build/config-format/babel-esm/main.js

@@ -0,0 +1 @@
+console.log("You know who");

test/build/config-format/babel-esm/package.json

@@ -0,0 +1,6 @@
+{
+  "type": "module",
+  "engines": {
+    "node": ">=14.15.0"
+  }
+}

test/build/config-format/babel-esm/webpack.config.babel.js

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import { fileURLToPath } from "url";
+import path from "path";
+
+export default {
+  mode: "development",
+  entry: "./main.js",
+  output: {
+    path: path.resolve(path.dirname(fileURLToPath(import.meta.url)), "dist"),
+    filename: "foo.bundle.js",
+  },
+};