Feat: init create webpack app

.cspell.json

@@ -92,6 +92,7 @@
     "testname",
     "Tobio",
     "tsbuildinfo",
+    "uzair",
     "typeahead",
     "wagoid",
     "webassembly",

.eslintignore

@@ -11,3 +11,6 @@ test/build/config/error-commonjs/syntax-error.js
 test/build/config/error-mjs/syntax-error.mjs
 test/build/config/error-array/webpack.config.js
 test/configtest/with-config-path/syntax-error.config.js
+
+packages/create-webpack-app
+

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 quickly scaffold a new webpack project. It provides a flexible set of commands for developers to increase speed when setting up a custom webpack project. webpack CLI addresses these needs by providing a set of tools to improve the setup of custom webpack configuration.
+- It is also going to support several front end frameworks and libraries like React, Angular, Vue, Svelte, etc.
+- Webpack Loader and Plugin scaffolding is also supported.
+
+## How to install
+
+```bash
+npm install --save-dev @webpack-cli/create-webpack-app
+```
+
+or
+
+```bash
+yarn add @webpack-cli/create-webpack-app --dev
+```
+
+## Supported arguments and commands
+
+### Usage
+
+All interactions with create-webpack-app are of the form
+
+```bash
+npx create-webpack-app [command] [options]
+```
+
+### Help Usage
+
+### Available Commands
+
+### Available Options

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

@@ -0,0 +1,55 @@
+import { Command } from "commander";
+import { resolve, join } from "path";
+import nodePlop from "node-plop";
+// Cspell:ignore plopfile, plopfile.js
+
+const program = new Command();
+const plop = await nodePlop("./lib/plopfile.js");
+const defaultValues = {
+  init: {
+    projectPath: resolve(join(process.cwd(), ".")),
+    projectName: "webpack-project",
+    langType: "none",
+    devServer: true,
+    htmlWebpackPlugin: true,
+    workboxWebpackPlugin: true,
+    cssType: "CSS only",
+    isCSS: true,
+    isPostCSS: true,
+    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", "c", "create", "new"])
+  .description("Initialize a new Webpack project")
+  .argument("[projectPath]", "Path to create the project")
+  .argument("[projectName]", "Name of the project")
+  .option("-f, --force", "Skip the prompt and use the default values", false)
+  .action(function (projectName, projectPath, opts) {
+    console.log("Initializing a new Webpack project");
+    const { force } = opts;
+    const initGenerator = plop.getGenerator("init");
+    const byPassValues = [];
+    if (projectName) byPassValues.push(projectName);
+    if (projectPath) byPassValues.push(projectPath);
+
+    if (force) {
+      console.log("Skipping the prompt and using the default values");
+      initGenerator.runActions(defaultValues.init);
+    } else {
+      initGenerator.runPrompts(byPassValues).then((answers) => {
+        initGenerator.runActions(answers);
+      });
+    }
+  });
+
+program.parse();

packages/create-webpack-app/package.json

@@ -0,0 +1,50 @@
+{
+  "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__"
+  ],
+  "dependencies": {
+    "commander": "^12.1.0",
+    "ejs": "^3.1.10",
+    "node-plop": "^0.32.0"
+  },
+  "devDependencies": {
+    "@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/plopfile.ts

@@ -0,0 +1,205 @@
+import { NodePlopAPI, Answers } from "./types";
+import { resolve, join } from "path";
+import ejs from "ejs";
+import { spawn } from "child_process";
+export default function (plop: NodePlopAPI) {
+  const dependencies = ["webpack", "webpack-cli"];
+  plop.setActionType("pkgInstall", (answers) => {
+    const options = {
+      cwd: `${answers.projectPath}/${answers.projectName}`,
+      encoding: "utf-8",
+    };
+    if (answers.devServer) {
+      dependencies.push("webpack-dev-server");
+    }
+    if (answers.htmlWebpackPlugin) {
+      dependencies.push("html-webpack-plugin", "html-loader");
+    }
+    if (answers.workboxWebpackPlugin) {
+      dependencies.push("workbox-webpack-plugin");
+    }
+    if (answers.isPostCSS) {
+      dependencies.push("postcss-loader", "autoprefixer");
+    }
+    console.log(`Installing packages: ${dependencies.join("\n")}`);
+    const returnMessage = `Project ${answers.projectName} has been successfully created at ${answers.projectPath}/${answers.projectName}`;
+
+    const packageManager = answers.packageManager;
+    const installCommandPrefix = packageManager === "yarn" ? "add" : "install";
+
+    const npmInstallPackages = spawn(
+      `${packageManager}`,
+      [`${installCommandPrefix}`, ...dependencies],
+      options,
+    );
+    npmInstallPackages.stdout.on("data", (data) => {
+      console.log(data.toString());
+    });
+    npmInstallPackages.stderr.on("data", (data) => {
+      console.error(data.toString());
+    });
+    npmInstallPackages.on("close", (code) => {
+      if (code !== 0) {
+        console.error(`child process exited with code ${code}`);
+        return;
+      } else {
+        console.log(returnMessage);
+      }
+    });
+    return "Package Installation Phase..."; // executes before the child process is completed
+  });
+  // Define a base generator for the project structure
+  plop.setGenerator("init", {
+    description: "Create a basic Webpack project",
+    prompts: [
+      {
+        type: "input",
+        name: "projectPath",
+        message: "Enter the project destination:",
+        default: ".",
+        filter: (input) => {
+          return resolve(join(process.cwd(), input));
+        },
+      },
+      {
+        type: "input",
+        name: "projectName",
+        message: "Enter your project name:",
+        default: "webpack-project",
+        validate(input, _) {
+          if (!input.trim()) {
+            return "Project name cannot be empty";
+          }
+          return true;
+        },
+      },
+      {
+        type: "list",
+        name: "langType",
+        message: "Which of the following JS solutions do you want to use?",
+        choices: ["none", "ES6", "Typescript"],
+        default: "none",
+        filter: (input, _) => {
+          switch (input) {
+            case "ES6":
+              dependencies.push("babel-loader", "@babel/core", "@babel/preset-env");
+              break;
+            case "Typescript":
+              dependencies.push("typescript", "ts-loader");
+              break;
+          }
+          return input;
+        },
+      },
+      {
+        type: "confirm",
+        name: "devServer",
+        message: "Would you like to use Webpack Dev server?",
+        default: true,
+      },
+      {
+        type: "confirm",
+        name: "htmlWebpackPlugin",
+        message: "Do you want to simplify the creation of HTML files for your bundle?",
+        default: true,
+      },
+      {
+        type: "confirm",
+        name: "workboxWebpackPlugin",
+        message: "Do you want to add PWA support?",
+        default: true,
+      },
+      {
+        type: "list",
+        name: "cssType",
+        message: "Which of the following CSS solution do you want to use?",
+        choices: ["none", "CSS only", "SASS", "LESS", "Stylus"],
+        default: "Css only",
+        filter: (input, answers) => {
+          if (input === "none") {
+            answers.isCSS = false;
+            answers.isPostCSS = false;
+            answers.extractPlugin = "No";
+          } else {
+            dependencies.push("style-loader", "css-loader");
+            switch (input) {
+              case "CSS only":
+                answers.isCSS = true;
+                break;
+              case "SASS":
+                dependencies.push("sass-loader", "node-sass");
+                break;
+              case "LESS":
+                dependencies.push("less-loader", "less");
+                break;
+              case "Stylus":
+                dependencies.push("stylus-loader", "stylus");
+                break;
+            }
+          }
+          return input;
+        },
+      },
+      {
+        type: "confirm",
+        name: "isCSS",
+        message: (answers) =>
+          `Will you be using CSS styles along with ${answers.cssType} in your project?`,
+        when: (answers) => answers.cssType !== "CSS only",
+        default: true,
+      },
+      {
+        type: "confirm",
+        name: "isPostCSS",
+        message: "Do you want to use PostCSS in your project?",
+        when: (answers) => answers.isCSS,
+        default: true,
+      },
+      {
+        type: "list",
+        name: "extractPlugin",
+        message: "Do you want to extract CSS into separate files?",
+        choices: ["No", "Only for Production", "Yes"],
+        when: (answers) => answers.isCSS,
+        default: "No",
+        filter: (input, _) => {
+          if (input !== "No") {
+            dependencies.push("mini-css-extract-plugin");
+          }
+          return input;
+        },
+      },
+      {
+        type: "list",
+        name: "packageManager",
+        message: "Which package manager do you want to use?",
+        choices: ["npm", "yarn"],
+        default: "npm",
+        validate(input, _) {
+          if (!input.trim()) {
+            return "Package manager cannot be empty";
+          }
+          return true;
+        },
+      },
+    ],
+    actions: [
+      {
+        type: "addMany",
+        destination: "{{projectPath}}/{{dashCase projectName}}",
+        base: "../templates/init/default",
+        templateFiles: "../templates/init/default/**/*",
+        transform: (content, data) => {
+          data.entryPoint = data.langType === "Typescript" ? "index.ts" : "index.js";
+          return ejs.render(content, data);
+        },
+        stripExtensions: ["tpl"],
+        force: true,
+        verbose: true,
+      },
+      {
+        type: "pkgInstall",
+      },
+    ],
+  });
+}

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

@@ -0,0 +1,24 @@
+export type {
+  ActionConfig,
+  AddActionConfig,
+  AddManyActionConfig,
+  AppendActionConfig,
+  CustomActionFunction,
+  ModifyActionConfig,
+  PlopCfg,
+  PlopGenerator,
+  NodePlopAPI,
+  PlopGeneratorConfig,
+  Actions,
+} from "node-plop";
+export interface Answers extends Record<string, any> {}
+
+import { ActionType as ActionTypeBase, CustomActionConfig } from "node-plop";
+// extended ACtionType to include custom action config as previously it was not recognizing
+export type ActionType = ActionTypeBase | CustomActionConfig<string>;
+export type InitOptions = { template: string; force?: boolean };
+export type LoaderOptions = { template: string };
+export type PluginOptions = { template: string };
+export type InitGeneratorOptions = { generationPath: string } & InitOptions;
+export type LoaderGeneratorOptions = { generationPath: string } & LoaderOptions;
+export type PluginGeneratorOptions = { generationPath: string } & PluginOptions;