fix(webpack-cli): add an option for preventing interpret (#3329)

* fix(webpack-cli): add an option for preventing interpret

* fix: define the option for built-in flags

* docs: add descriptions of the option

* refactor: rename `--config-registered` to `--disable-interpret`

* fix: change conditional statement

* refactor: standalone test

* test: use `--disable-interpret` without transpilation

* docs: fix the description

Co-authored-by: Anshuman Verma <anshu.av97@gmail.com>

* refactor: built-in options type

Co-authored-by: Nitin Kumar <snitin315@gmail.com>

* test: re-update snapshots

* fix: add double quote

Co-authored-by: Nitin Kumar <snitin315@gmail.com>

* test: update snapshots for webpack4

* chore: remove `--require` from `test:coverage`

* test: update snapshots

Co-authored-by: Anshuman Verma <anshu.av97@gmail.com>
Co-authored-by: Nitin Kumar <snitin315@gmail.com>

Author: 3 people

OPTIONS.md

@@ -8,6 +8,7 @@ Options:
   -c, --config <value...>                                                            Provide path to a webpack configuration file e.g. ./webpack.config.js.
   --config-name <value...>                                                           Name of the configuration to use.
   -m, --merge                                                                        Merge two or more configurations using 'webpack-merge'.
+  --disable-interpret                                                                Disable interpret for loading the config file.
   --env <value...>                                                                   Environment passed to the configuration when it is a function.
   --node-env <value>                                                                 Sets process.env.NODE_ENV to the specified value.
   -h, --hot [value]                                                                  Enables Hot Module Replacement

package.json

@@ -41,7 +41,7 @@
     "pretest": "yarn build && yarn lint && yarn prepsuite",
     "test": "jest --reporters=default",
     "test:smoketests": "nyc node smoketests",
-    "test:coverage": "nyc --no-clean --require ts-node/register jest",
+    "test:coverage": "nyc --no-clean jest",
     "test:cli": "jest test --reporters=default",
     "test:packages": "jest packages/ --reporters=default",
     "test:ci": "yarn test:cli && yarn test:packages",

packages/webpack-cli/src/types.ts

@@ -175,6 +175,7 @@ type WebpackDevServerOptions = DevServerConfig &
     merge?: boolean;
     config: string[];
     configName?: string[];
+    disableInterpret?: boolean;
     argv: Argv;
   };
 

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

@@ -697,6 +697,7 @@ class WebpackCLI implements IWebpackCLI {
       "config",
       "config-name",
       "merge",
+      "disable-interpret",
       "env",
       "mode",
       "watch",
@@ -746,6 +747,16 @@ class WebpackCLI implements IWebpackCLI {
         ],
         description: "Merge two or more configurations using 'webpack-merge'.",
       },
+      {
+        name: "disable-interpret",
+        configs: [
+          {
+            type: "enum",
+            values: [true],
+          },
+        ],
+        description: "Disable interpret a config file.",
+      },
       // Complex configs
       {
         name: "env",
@@ -1775,12 +1786,15 @@ class WebpackCLI implements IWebpackCLI {
   }
 
   async loadConfig(options: Partial<WebpackDevServerOptions>) {
+    const disableInterpret =
+      typeof options.disableInterpret !== "undefined" && options.disableInterpret;
+
     const interpret = require("interpret");
     const loadConfigByPath = async (configPath: string, argv: Argv = {}) => {
       const ext = path.extname(configPath);
       const interpreted = Object.keys(interpret.jsVariants).find((variant) => variant === ext);
 
-      if (interpreted) {
+      if (interpreted && !disableInterpret) {
         const rechoir: Rechoir = require("rechoir");
 
         try {

test/build/config-format/disable-interpret/disable-interpret.test.js

@@ -0,0 +1,32 @@
+const { run } = require("../../../utils/test-utils");
+const { existsSync, unlinkSync } = require("fs");
+const { resolve } = require("path");
+
+// eslint-disable-next-line node/no-unpublished-require
+const execa = require("execa");
+const { sync: spawnSync } = execa;
+
+describe("webpack cli", () => {
+  it('should work with the "disable-interpret" option from flags', async () => {
+    const configFileName = "webpack.config";
+    const configFilePath = resolve(__dirname, `${configFileName}.ts`);
+    const buildScripts = spawnSync("yarn", ["tsc", configFilePath]);
+    expect(buildScripts.stdout).toBeTruthy();
+
+    const { exitCode, stderr, stdout } = await run(__dirname, ["--disable-interpret"]);
+    unlinkSync(resolve(__dirname, `${configFileName}.js`));
+
+    expect(stderr).toBeFalsy();
+    expect(stdout).toBeTruthy();
+    expect(exitCode).toBe(0);
+    expect(existsSync(resolve(__dirname, "dist/foo.bundle.js"))).toBeTruthy();
+  });
+
+  it("should log error without transpilation", async () => {
+    const { exitCode, stderr, stdout } = await run(__dirname, ["--disable-interpret"]);
+
+    expect(exitCode).toBe(2);
+    expect(stderr).toContain(`Failed to load '${resolve(__dirname, "webpack.config.ts")}' config`);
+    expect(stdout).toBeFalsy();
+  });
+});

test/build/config-format/disable-interpret/main.ts

@@ -0,0 +1 @@
+console.log("Main typescript file");

test/build/config-format/disable-interpret/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "module": "commonjs"
+  }
+}

test/build/config-format/disable-interpret/webpack.config.ts

@@ -0,0 +1,14 @@
+/* eslint-disable node/no-unsupported-features/es-syntax */
+/** eslint-disable **/
+import * as path from "path";
+
+const config = {
+  mode: "production",
+  entry: "./main.ts",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "foo.bundle.js",
+  },
+};
+
+export = config;

test/build/config-format/typescript/typescript.test.js

@@ -4,7 +4,9 @@ const { resolve } = require("path");
 
 describe("webpack cli", () => {
   it("should support typescript file", async () => {
-    const { exitCode, stderr, stdout } = await run(__dirname, ["-c", "./webpack.config.ts"]);
+    const { exitCode, stderr, stdout } = await run(__dirname, ["-c", "./webpack.config.ts"], {
+      nodeOptions: ["--require=ts-node/register"],
+    });
 
     expect(stderr).toBeFalsy();
     expect(stdout).toBeTruthy();