feat: init create-webpack-app package [1]

.eslintrc.js

@@ -42,5 +42,11 @@ module.exports = {
         "node/no-unsupported-features/es-syntax": "off",
       },
     },
+    {
+      files: ["**/packages/create-webpack-app/**/*.js"],
+      parserOptions: {
+        sourceType: "module",
+      },
+    },
   ],
 };

packages/create-webpack-app/README.md

@@ -0,0 +1,41 @@
+<div>
+    <a href="https://github.com/webpack/webpack-cli">
+        <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
+    </a>
+</div>
+
+# create-webpack-app CLI
+
+## About
+
+- `create-webpack-app` is a cli tool that enables developers to scaffold a new webpack project quickly. It provides developers with a flexible set of commands to increase speed when setting up a custom webpack project. webpack CLI addresses these needs by providing tools to improve the setup of custom webpack configuration.
+- It also supports several front-end frameworks and libraries like React, Angular, Vue, Svelte, etc.
+- Webpack Loader and Plugin scaffolding is also supported.
+
+## Supported arguments and commands
+
+### Usage
+
+```bash
+npx create-webpack-app [command] [options]
+```
+
+### CLI options
+
+**To generate default template**
+
+```bash
+npx create-webpack-app
+```
+
+**To generate with default answers**
+
+```bash
+npx create-webpack-app -f, --force
+```
+
+**To scaffold in a specified path**
+
+```bash
+npx create-webpack-app [generation-path]
+```

packages/create-webpack-app/bin/cli.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+//eslint-disable-next-line
+import * as cli from "../lib/index.js";

packages/create-webpack-app/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "create-webpack-app",
+  "version": "1.0.0",
+  "description": "CLI for scaffolding webpack projects using default config, framework templates, loader or plugins templates",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webpack-cli/create-webpack-app.git"
+  },
+  "homepage": "https://github.com/webpack/webpack-cli/tree/master/packages/create-webpack-app",
+  "bugs": "https://github.com/webpack/webpack-cli/issues",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/webpack"
+  },
+  "bin": {
+    "create-webpack-app": "./bin/cli.js"
+  },
+  "type": "module",
+  "main": "./lib/index.js",
+  "scripts": {
+    "build": "tsc --build",
+    "watch": "tsc --watch"
+  },
+  "engines": {
+    "node": ">=18.12.0"
+  },
+  "keywords": [
+    "webpack",
+    "cli",
+    "scaffolding",
+    "module",
+    "bundler",
+    "web",
+    "frameworks"
+  ],
+  "files": [
+    "bin",
+    "lib",
+    "!**/*__tests__"
+  ],
+  "peerDependencies": {
+    "webpack-cli": "^5.x.x"
+  },
+  "dependencies": {
+    "colorette": "^2.0.20",
+    "commander": "^12.1.0",
+    "cross-spawn": "^7.0.3",
+    "ejs": "^3.1.10",
+    "node-plop": "^0.32.0"
+  },
+  "devDependencies": {
+    "@types/cross-spawn": "^6.0.6",
+    "@types/ejs": "^3.1.5"
+  }
+}

packages/create-webpack-app/src/generators/default.ts

@@ -0,0 +1 @@
+// refactored generator will be written here shortly

packages/create-webpack-app/src/index.ts

@@ -0,0 +1,80 @@
+// Cspell:ignore plopfile, plopfile.js
+import { Command } from "commander";
+import { resolve, dirname } from "path";
+import nodePlop from "node-plop";
+import { fileURLToPath } from "url";
+
+// eslint-disable-next-line node/no-missing-import
+import { onSuccessHandler, onFailureHandler, logger } from "./utils/logger.js";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const program = new Command();
+const plop = await nodePlop(resolve(__dirname, "./plopfile.js"));
+const defaultValues = {
+  init: {
+    projectPath: process.cwd(),
+    langType: "none",
+    devServer: true,
+    htmlWebpackPlugin: true,
+    workboxWebpackPlugin: true,
+    cssType: "none",
+    isCSS: false,
+    isPostCSS: false,
+    extractPlugin: "No",
+    packageManager: "npm",
+  },
+};
+
+program
+  .version("1.0.0", "-v, --version")
+  .usage("[command] [options]")
+  .helpOption("-h, --help", "Display help for command")
+  .description("A CLI tool to generate a Webpack project");
+
+program
+  .command("init", { isDefault: true })
+  .aliases(["i", "n", "c", "create", "new"])
+  .description("Initialize a new Webpack project")
+  .argument("[projectPath]", "Path to create the project")
+  .option("-f, --force", "Skip the prompt and use the default values", false)
+  .action(async function (projectPath, opts) {
+    const { force } = opts;
+    const initGenerator = plop.getGenerator("init");
+    const byPassValues: Array<string> = [];
+
+    if (projectPath) byPassValues.push(projectPath);
+    try {
+      if (force) {
+        logger.warn("Skipping the prompt and using the default values");
+
+        logger.info("Initializing a new Webpack project");
+        await initGenerator.runActions(
+          {
+            ...defaultValues.init,
+            projectPath: byPassValues[0]
+              ? resolve(process.cwd(), byPassValues[0])
+              : defaultValues.init.projectPath,
+          },
+          {
+            onSuccess: onSuccessHandler,
+            onFailure: onFailureHandler,
+          },
+        );
+      } else {
+        const answers = await initGenerator.runPrompts(byPassValues);
+
+        logger.info("Initializing a new Webpack project");
+        await initGenerator.runActions(answers, {
+          onSuccess: onSuccessHandler,
+          onFailure: onFailureHandler,
+        });
+      }
+      logger.success("Project has been initialised with webpack!");
+    } catch (error) {
+      logger.error(`Failed to initialize the project with webpack!\n ${error}`);
+      process.exit(2);
+    }
+  });
+
+program.parse();