Feat: init create webpack app

.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,11 @@
+# `create-webpack-app`
+
+> TODO: description
+
+## Usage
+
+```js
+const createWebpackApp = require("create-webpack-app");
+
+// TODO: DEMONSTRATE API
+```

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

@@ -0,0 +1,19 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import minimist from "minimist";
+import { Plop, run } from "plop";
+/* cSpell:disable */
+const args = process.argv.slice(2);
+const argv = minimist(args);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+Plop.prepare(
+  {
+    cwd: argv.cwd,
+    configPath: path.resolve(__dirname, "../lib/plopfile.js"),
+    preload: argv.preload || [],
+    completion: argv.completion,
+  },
+  (env) => Plop.execute(env, run),
+);

packages/create-webpack-app/package.json

@@ -0,0 +1,53 @@
+{
+  "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/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/index.js"
+  },
+  "type": "module",
+  "main": "./lib/index.js",
+  "scripts": {
+    "build": "tsc --build",
+    "watch": "tsc --watch"
+  },
+  "engines": {
+    "node": ">=14.15.0"
+  },
+  "keywords": [
+    "webpack",
+    "cli",
+    "scaffolding",
+    "module",
+    "bundler",
+    "web",
+    "frameworks"
+  ],
+  "files": [
+    "bin",
+    "lib",
+    "!**/*__tests__"
+  ],
+  "dependencies": {
+    "ejs": "^3.1.10",
+    "minimist": "^1.2.8",
+    "node-plop": "^0.32.0",
+    "plop": "^4.0.1"
+  },
+  "devDependencies": {
+    "@types/ejs": "^3.1.5"
+  },
+  "peerDependencies": {},
+  "peerDependenciesMeta": {}
+}

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,179 @@
+import { NodePlopAPI } from "./types";
+import { resolve } from "path";
+import ejs from "ejs";
+/* eslint-disable no-unused-vars */
+
+export default function (plop: NodePlopAPI) {
+  const dependencies = ["webpack", "webpack-cli"];
+  // Define a base generator for the project structure
+  plop.setGenerator("init", {
+    description: "Create a basic Webpack project",
+    prompts: [
+      {
+        type: "input",
+        name: "projectName",
+        message: "Enter your project name:",
+        default: "webpack-project",
+        validate(input, _) {
+          if (!input) {
+            return "Project name cannot be empty";
+          }
+          return true;
+        },
+      },
+      {
+        type: "input",
+        name: "configPath",
+        message: "Enter the project destination:",
+        default: ".",
+        filter: (input, answers) => {
+          return resolve(input, answers.projectName);
+        },
+      },
+      {
+        type: "input",
+        name: "entryPoint",
+        message: "Enter the entry point of your application:",
+        default: "src/index.js",
+        validate(input, _) {
+          if (!input) {
+            return "Entry point 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,
+        filter: (input, _) => {
+          if (input) {
+            dependencies.push("webpack-dev-server");
+          }
+          return input;
+        },
+      },
+      {
+        type: "confirm",
+        name: "htmlWebpackPlugin",
+        message: "Do you want to simplify the creation of HTML files for your bundle?",
+        default: true,
+        filter: (input, _) => {
+          if (input) {
+            dependencies.push("html-webpack-plugin", "html-loader");
+          }
+          return input;
+        },
+      },
+      {
+        type: "confirm",
+        name: "workboxWebpackPlugin",
+        message: "Do you want to add PWA support?",
+        default: true,
+        filter: (input, _) => {
+          if (input) {
+            dependencies.push("workbox-webpack-plugin");
+          }
+          return input;
+        },
+      },
+      {
+        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,
+        filter: (input, _) => {
+          if (input) {
+            dependencies.push("postcss-loader", "autoprefixer");
+          }
+          return input;
+        },
+        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;
+        },
+      },
+    ],
+    actions: [
+      {
+        type: "addMany",
+        destination: "{{configPath}}",
+        base: "../templates/init/default",
+        templateFiles: "../templates/init/default/**/*",
+        transform: (content, data) => ejs.render(content, data),
+        stripExtensions: ["tpl"],
+        force: true,
+        verbose: true,
+      },
+    ],
+  });
+}

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

@@ -0,0 +1,21 @@
+export type {
+  ActionConfig,
+  ActionType,
+  AddActionConfig,
+  AddManyActionConfig,
+  AppendActionConfig,
+  CustomActionFunction,
+  ModifyActionConfig,
+  PlopCfg,
+  PlopGenerator,
+  NodePlopAPI,
+  PlopGeneratorConfig,
+  Actions,
+} from "node-plop";
+
+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;

packages/create-webpack-app/templates/init/default/.babelrc

@@ -0,0 +1,11 @@
+{
+  "plugins": ["@babel/syntax-dynamic-import"],
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ]
+  ]
+}

packages/create-webpack-app/templates/init/default/README.md

@@ -0,0 +1,15 @@
+# 🚀 Welcome to your new awesome project!
+
+This project has been created using **webpack-cli**, you can now run
+
+```bash
+npm run build
+```
+
+or
+
+```bash
+yarn build
+```
+
+to bundle your application

packages/create-webpack-app/templates/init/default/index.js

@@ -0,0 +1 @@
+console.log("Hello World!");

packages/create-webpack-app/templates/init/default/package.json.tpl

@@ -0,0 +1,17 @@
+{
+  "version": "1.0.0",
+
+  "description": "My webpack project",
+
+  "name": <%= projectName %>,
+  "scripts": {
+  "build": "webpack --mode=production --node-env=production",
+
+  "build:dev": "webpack --mode=development",
+  "build:prod": "webpack --mode=production --node-env=production",
+  "watch": "webpack --watch",
+  <% if (devServer) { %>
+    "serve": "webpack serve"
+  <% } %>
+  }
+}

packages/create-webpack-app/templates/init/default/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  // Add you postcss configuration here
+  // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
+  plugins: [["autoprefixer"]],
+};

packages/create-webpack-app/templates/init/default/src/index.ts

@@ -0,0 +1 @@
+console.log("Hello, World!");

packages/create-webpack-app/templates/init/default/template.html.tpl

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Webpack App</title>
+    </head>
+    <body>
+        <h1>Hello world!</h1>
+        <h2>Tip: Check your console</h2>
+    </body>
+    <% if (workboxWebpackPlugin) { %>
+    <script>
+        if ("serviceWorker" in navigator) {
+            window.addEventListener("load", () => {
+                navigator.serviceWorker
+                    .register("service-worker.js")
+                    .then((registration) => {
+                        console.log("Service Worker registered: ", registration);
+                    })
+                    .catch((registrationError) => {
+                        console.error("Service Worker registration failed: ", registrationError);
+                    });
+            });
+        }
+    </script><% } %>
+</html>

packages/create-webpack-app/templates/init/default/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "allowJs": true
+  },
+  "files": ["src/index.ts"]
+}