feat: allow to run commands without webpack installation where it is …

…unnecessary (#2907)

packages/configtest/src/index.ts

@@ -1,17 +1,20 @@
+const WEBPACK_PACKAGE = process.env.WEBPACK_PACKAGE || "webpack";
+
 class ConfigTestCommand {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
   async apply(cli: any): Promise<void> {
-    const { logger, webpack } = cli;
-
     await cli.makeCommand(
       {
         name: "configtest [config-path]",
         alias: "t",
         description: "Validate a webpack configuration.",
         pkg: "@webpack-cli/configtest",
+        dependencies: [WEBPACK_PACKAGE],
       },
       [],
       async (configPath: string | undefined): Promise<void> => {
+        cli.webpack = await cli.loadWebpack();
+
         const config = await cli.resolveConfig(configPath ? { config: [configPath] } : {});
         const configPaths = new Set<string>();
 
@@ -28,31 +31,31 @@ class ConfigTestCommand {
         }
 
         if (configPaths.size === 0) {
-          logger.error("No configuration found.");
+          cli.logger.error("No configuration found.");
           process.exit(2);
         }
 
-        logger.info(`Validate '${Array.from(configPaths).join(" ,")}'.`);
+        cli.logger.info(`Validate '${Array.from(configPaths).join(" ,")}'.`);
 
         try {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          const error: any = webpack.validate(config.options);
+          const error: any = cli.webpack.validate(config.options);
 
           // TODO remove this after drop webpack@4
           if (error && error.length > 0) {
-            throw new webpack.WebpackOptionsValidationError(error);
+            throw new cli.webpack.WebpackOptionsValidationError(error);
           }
         } catch (error) {
           if (cli.isValidationError(error)) {
-            logger.error(error.message);
+            cli.logger.error(error.message);
           } else {
-            logger.error(error);
+            cli.logger.error(error);
           }
 
           process.exit(2);
         }
 
-        logger.success("There are no validation errors in the given webpack configuration.");
+        cli.logger.success("There are no validation errors in the given webpack configuration.");
       },
     );
   }

packages/generators/src/index.ts

@@ -7,8 +7,6 @@ import initGenerator from "./init-generator";
 class GeneratorsCommand {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
   async apply(cli: any): Promise<void> {
-    const { logger } = cli;
-
     await cli.makeCommand(
       {
         name: "init [generation-path]",
@@ -51,7 +49,7 @@ class GeneratorsCommand {
         env.registerStub(initGenerator, generatorName);
 
         env.run(generatorName, { cli, options }, () => {
-          logger.success("Project has been initialised with webpack!");
+          cli.logger.success("Project has been initialised with webpack!");
         });
       },
     );
@@ -83,7 +81,7 @@ class GeneratorsCommand {
         env.registerStub(loaderGenerator, generatorName);
 
         env.run(generatorName, { cli, options }, () => {
-          logger.success("Loader template has been successfully scaffolded.");
+          cli.logger.success("Loader template has been successfully scaffolded.");
         });
       },
     );
@@ -115,7 +113,7 @@ class GeneratorsCommand {
         env.registerStub(pluginGenerator, generatorName);
 
         env.run(generatorName, { cli, options }, () => {
-          logger.success("Plugin template has been successfully scaffolded.");
+          cli.logger.success("Plugin template has been successfully scaffolded.");
         });
       },
     );

packages/info/src/index.ts

@@ -32,8 +32,6 @@ const DEFAULT_DETAILS: Information = {
 class InfoCommand {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
   async apply(cli: any): Promise<void> {
-    const { logger } = cli;
-
     await cli.makeCommand(
       {
         name: "info",
@@ -71,7 +69,7 @@ class InfoCommand {
               envinfoConfig["json"] = true;
               break;
             default:
-              logger.error(`'${output}' is not a valid value for output`);
+              cli.logger.error(`'${output}' is not a valid value for output`);
               process.exit(2);
           }
         }
@@ -81,7 +79,7 @@ class InfoCommand {
         info = info.replace(/npmPackages/g, "Packages");
         info = info.replace(/npmGlobalPackages/g, "Global Packages");
 
-        logger.raw(info);
+        cli.logger.raw(info);
       },
     );
   }

packages/serve/src/index.ts

@@ -1,27 +1,27 @@
 import { devServerOptionsType } from "./types";
 
+const WEBPACK_PACKAGE = process.env.WEBPACK_PACKAGE || "webpack";
+const WEBPACK_DEV_SERVER_PACKAGE = process.env.WEBPACK_DEV_SERVER_PACKAGE || "webpack-dev-server";
+
 class ServeCommand {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
   async apply(cli: any): Promise<void> {
-    const { logger, webpack } = cli;
-
     const loadDevServerOptions = () => {
       // TODO simplify this after drop webpack v4 and webpack-dev-server v3
-      // eslint-disable-next-line @typescript-eslint/no-var-requires, node/no-extraneous-require
-      const devServer = require("webpack-dev-server");
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const devServer = require(WEBPACK_DEV_SERVER_PACKAGE);
       const isNewDevServerCLIAPI = typeof devServer.schema !== "undefined";
 
       let options = {};
 
       if (isNewDevServerCLIAPI) {
-        if (webpack.cli && typeof webpack.cli.getArguments === "function") {
-          options = webpack.cli.getArguments(devServer.schema);
+        if (cli.webpack.cli && typeof cli.webpack.cli.getArguments === "function") {
+          options = cli.webpack.cli.getArguments(devServer.schema);
         } else {
           options = devServer.cli.getArguments();
         }
       } else {
-        // eslint-disable-next-line node/no-extraneous-require
-        options = require("webpack-dev-server/bin/cli-flags");
+        options = require(`${WEBPACK_DEV_SERVER_PACKAGE}/bin/cli-flags`);
       }
 
       // Old options format
@@ -50,15 +50,17 @@ class ServeCommand {
         description: "Run the webpack dev server.",
         usage: "[entries...] [options]",
         pkg: "@webpack-cli/serve",
-        dependencies: ["webpack-dev-server"],
+        dependencies: [WEBPACK_PACKAGE, WEBPACK_DEV_SERVER_PACKAGE],
       },
-      () => {
+      async () => {
         let devServerFlags = [];
 
+        cli.webpack = await cli.loadWebpack();
+
         try {
           devServerFlags = loadDevServerOptions();
         } catch (error) {
-          logger.error(
+          cli.logger.error(
             `You need to install 'webpack-dev-server' for running 'webpack serve'.\n${error}`,
           );
           process.exit(2);
@@ -159,17 +161,17 @@ class ServeCommand {
           process.stdin.resume();
         }
 
-        // eslint-disable-next-line @typescript-eslint/no-var-requires, node/no-extraneous-require
-        const DevServer = require("webpack-dev-server");
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const DevServer = require(WEBPACK_DEV_SERVER_PACKAGE);
         const isNewDevServerCLIAPI = typeof DevServer.schema !== "undefined";
 
         let devServerVersion;
 
         try {
-          // eslint-disable-next-line node/no-extraneous-require, @typescript-eslint/no-var-requires
-          devServerVersion = require("webpack-dev-server/package.json").version;
+          // eslint-disable-next-line @typescript-eslint/no-var-requires
+          devServerVersion = require(`${WEBPACK_DEV_SERVER_PACKAGE}/package.json`).version;
         } catch (err) {
-          logger.error(
+          cli.logger.error(
             `You need to install 'webpack-dev-server' for running 'webpack serve'.\n${err}`,
           );
           process.exit(2);
@@ -200,8 +202,8 @@ class ServeCommand {
             }, {});
             const result = { ...(compilerForDevServer.options.devServer || {}) };
             const problems = (
-              webpack.cli && typeof webpack.cli.processArguments === "function"
-                ? webpack.cli
+              cli.webpack.cli && typeof cli.webpack.cli.processArguments === "function"
+                ? cli.webpack.cli
                 : DevServer.cli
             ).processArguments(args, result, values);
 
@@ -335,9 +337,9 @@ class ServeCommand {
             servers.push(server);
           } catch (error) {
             if (cli.isValidationError(error)) {
-              logger.error(error.message);
+              cli.logger.error(error.message);
             } else {
-              logger.error(error);
+              cli.logger.error(error);
             }
 
             process.exit(2);

packages/webpack-cli/bin/cli.js

@@ -10,7 +10,6 @@ require("v8-compile-cache");
 
 const importLocal = require("import-local");
 const runCLI = require("../lib/bootstrap");
-const utils = require("../lib/utils");
 
 if (!process.env.WEBPACK_CLI_SKIP_IMPORT_LOCAL) {
   // Prefer the local installation of `webpack-cli`
@@ -21,24 +20,4 @@ if (!process.env.WEBPACK_CLI_SKIP_IMPORT_LOCAL) {
 
 process.title = "webpack";
 
-if (utils.packageExists("webpack")) {
-  runCLI(process.argv, originalModuleCompile);
-} else {
-  const { promptInstallation, logger, colors } = utils;
-
-  promptInstallation("webpack", () => {
-    utils.logger.error(`It looks like ${colors.bold("webpack")} is not installed.`);
-  })
-    .then(() => {
-      logger.success(`${colors.bold("webpack")} was installed successfully.`);
-
-      runCLI(process.argv, originalModuleCompile);
-    })
-    .catch(() => {
-      logger.error(
-        `Action Interrupted, Please try once again or install ${colors.bold("webpack")} manually.`,
-      );
-
-      process.exit(2);
-    });
-}
+runCLI(process.argv, originalModuleCompile);