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

.cspell.json

@@ -64,6 +64,7 @@
     "nwjs",
     "Oikawa",
     "pathinfo",
+    "plopfile",
     "pnpm",
     "postcss",
     "prebuild",
@@ -101,7 +102,8 @@
     "Yuuji",
     "Zangetsu",
     "Zenitsu",
-    "quickstart"
+    "quickstart",
+    "pinia"
   ],
   "dictionaries": ["npm", "software-terms"],
   "ignorePaths": [

.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,48 @@
+<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 generate in a specified path**
+
+```bash
+npx create-webpack-app [generation-path]
+```
+
+**To generate a project according to a template**
+
+```bash
+npx create-webpack-app --template <template-name>
+
+```

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,57 @@
+{
+  "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": {
+    "@inquirer/prompts": "^5.1.2",
+    "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/init/default.ts

@@ -0,0 +1,198 @@
+import { Answers, ActionType } from "../../types";
+import { dirname, join, resolve } from "path";
+import { NodePlopAPI, DynamicActionsFunction } from "node-plop";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default async function (plop: NodePlopAPI) {
+  // dependencies to be installed
+  const devDependencies: Array<string> = ["webpack", "webpack-cli"];
+
+  await plop.load("../../utils/pkgInstallAction.js", {}, true);
+  await plop.load("../../utils/fileActions.js", {}, true);
+
+  plop.setDefaultInclude({ generators: true, actionTypes: true });
+  plop.setPlopfilePath(resolve(__dirname, "../../plopfile.js"));
+  // Define a custom action for installing packages
+
+  // Define a base generator for the project structure
+  plop.setGenerator("init-default", {
+    description: "Create a basic webpack project",
+    prompts: [
+      {
+        type: "input",
+        name: "projectPath",
+        message: "Enter the project destination:",
+        default: ".",
+        filter: (input) => {
+          return resolve(process.cwd(), input);
+        },
+      },
+      {
+        type: "list",
+        name: "langType",
+        message: "Which of the following JS solutions do you want to use?",
+        choices: ["none", "ES6", "Typescript"],
+        default: "none",
+      },
+      {
+        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: "none",
+        filter: (input, answers) => {
+          if (input === "none") {
+            answers.isCSS = false;
+            answers.isPostCSS = false;
+            answers.extractPlugin = "No";
+          } else if (input === "CSS only") {
+            answers.isCSS = true;
+          }
+          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?",
+        default: (answers: Answers) => answers.cssType == "CSS only",
+      },
+      {
+        type: "list",
+        name: "extractPlugin",
+        message: "Do you want to extract CSS into separate files?",
+        choices: ["No", "Only for Production", "Yes"],
+        default: "No",
+      },
+      {
+        type: "list",
+        name: "packageManager",
+        message: "Which package manager do you want to use?",
+        choices: ["npm", "yarn", "pnpm"],
+        default: "npm",
+        validate(input) {
+          if (!input.trim()) {
+            return "Package manager cannot be empty";
+          }
+          return true;
+        },
+      },
+    ],
+    actions: function (answers: Answers) {
+      const actions: ActionType[] = [];
+
+      switch (answers.langType) {
+        case "ES6":
+          devDependencies.push("babel-loader", "@babel/core", "@babel/preset-env");
+          break;
+        case "Typescript":
+          devDependencies.push("typescript", "ts-loader");
+          break;
+      }
+
+      if (answers.devServer) {
+        devDependencies.push("webpack-dev-server");
+      }
+
+      if (answers.htmlWebpackPlugin) {
+        devDependencies.push("html-webpack-plugin", "html-loader");
+      }
+
+      if (answers.workboxWebpackPlugin) {
+        devDependencies.push("workbox-webpack-plugin");
+      }
+
+      if (answers.isPostCSS) {
+        devDependencies.push("postcss-loader", "postcss", "autoprefixer");
+      }
+
+      if (answers.extractPlugin !== "No") {
+        devDependencies.push("mini-css-extract-plugin");
+      }
+
+      if (answers.cssType !== "none") {
+        devDependencies.push("style-loader", "css-loader");
+        switch (answers.cssType) {
+          case "SASS":
+            devDependencies.push("sass-loader", "sass");
+            break;
+          case "LESS":
+            devDependencies.push("less-loader", "less");
+            break;
+          case "Stylus":
+            devDependencies.push("stylus-loader", "stylus");
+            break;
+        }
+      }
+      if (answers.extractPlugin !== "No") {
+        devDependencies.push("mini-css-extract-plugin");
+      }
+
+      const files = ["./index.html", "webpack.config.js", "package.json", "README.md"];
+
+      switch (answers.langType) {
+        case "Typescript":
+          answers.entryPoint = "./src/index.ts";
+          files.push("tsconfig.json", answers.entryPoint as string);
+          break;
+        case "ES6":
+          answers.entryPoint = "./src/index.js";
+          files.push("babel.config.json", answers.entryPoint as string);
+          break;
+        default:
+          answers.entryPoint = "./src/index.js";
+          files.push(answers.entryPoint as string);
+          break;
+      }
+      if (answers.isPostCSS) {
+        files.push("postcss.config.js");
+      }
+
+      for (const file of files) {
+        const initialConfig: ActionType = {
+          type: "fileActions",
+          path: join(answers.projectPath, file),
+          templateFile: join(plop.getPlopfilePath(), "../templates/init/default", `${file}.tpl`),
+          data: answers,
+        };
+        actions.push(initialConfig);
+      }
+
+      actions.push({
+        type: "pkgInstall",
+        path: plop.renderString("{{projectPath}}/", answers),
+        // Custom function don't automatically render hbs template as path hence manual rendering
+        packages: devDependencies,
+      });
+      return actions;
+    } as DynamicActionsFunction,
+  });
+}