chore: migrate to eslint-config-webpack

.cspell.json

@@ -116,6 +116,7 @@
     "**/yarn.lock",
     "**/*.png.tpl",
     "**/package-lock.json",
+    "packages/*/lib/**",
     "node_modules",
     "coverage",
     "*.log"

eslint.config.mjs

@@ -0,0 +1,36 @@
+import { globalIgnores, defineConfig } from "eslint/config";
+import config from "eslint-config-webpack";
+import configs from "eslint-config-webpack/configs.js";
+
+export default defineConfig([
+  globalIgnores([
+    "packages/*/lib/**/*",
+    "test/**/dist/**/*",
+    "test/**/bin/**/*",
+    "test/**/binary/**/*",
+    "test/**/index.js",
+    "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/build/config-format/esm-require-await/webpack.config.js",
+    "test/configtest/with-config-path/syntax-error.config.js",
+    "test/build/config-format/esm-require/webpack.config.js",
+  ]),
+  {
+    extends: [config],
+    ignores: ["./packages/create-webpack-app/**/*"],
+    rules: {
+      // We are CLI, so using `console.log` is normal
+      "no-console": "off",
+      strict: "off",
+    },
+  },
+  {
+    files: ["./packages/create-webpack-app/**/*"],
+    extends: [configs["recommended-module"]],
+    rules: {
+      // We are CLI, so using `console.log` is normal
+      "no-console": "off",
+    },
+  },
+]);

package.json

@@ -32,11 +32,14 @@
     "build": "tsc --build",
     "build:ci": "tsc --build",
     "watch": "tsc --build --watch",
-    "lint:prettier": "prettier --cache --list-different .",
-    "lint:eslint": "eslint --cache --ext .js --ext .ts .",
-    "lint:spelling": "cspell --cache --no-must-find-files --quiet \"**/*.*\"",
-    "lint": "yarn lint:eslint && yarn lint:prettier && yarn lint:spelling",
-    "fix": "yarn lint:eslint --fix && yarn lint:prettier --write",
+    "lint": "yarn lint:code && yarn lint:spellcheck",
+    "lint:code": "eslint --cache .",
+    "lint:spellcheck": "cspell --cache --no-must-find-files --quiet \"**/*.*\"",
+    "fmt": "yarn fmt:base --log-level warn --write",
+    "fmt:check": "yarn fmt:base --check",
+    "fmt:base": "prettier --cache --ignore-unknown .",
+    "fix": "yarn fix:code",
+    "fix:code": "yarn lint:code --fix",
     "pretest": "yarn build && yarn lint",
     "test": "jest --reporters=default",
     "test:smoketests": "nyc node smoketests",
@@ -56,32 +59,40 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/register": "^7.15.8",
+    "@eslint/js": "^9.28.0",
+    "@eslint/markdown": "^6.6.0",
     "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@stylistic/eslint-plugin": "^5.0.0",
     "@types/jest": "^29.5.13",
     "@types/node": "^22.5.5",
     "@types/rechoir": "^0.6.1",
-    "@typescript-eslint/eslint-plugin": "^8.6.0",
-    "@typescript-eslint/parser": "^8.6.0",
     "coffeescript": "^2.7.0",
     "colorette": "^2.0.16",
     "concat-stream": "^2.0.0",
     "cspell": "^8.3.2",
     "css-loader": "^7.1.2",
     "del-cli": "^6.0.0",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-n": "^17.10.2",
+    "eslint": "^9.29.0",
+    "eslint-config-webpack": "^4.1.4",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jest": "^29.0.1",
+    "eslint-plugin-jsdoc": "^51.2.3",
+    "eslint-plugin-n": "^17.19.0",
+    "eslint-plugin-prettier": "^5.4.1",
+    "eslint-plugin-unicorn": "^59.0.1",
     "execa": "^5.0.0",
     "get-port": "^5.1.1",
+    "globals": "^16.2.0",
     "husky": "^9.1.4",
     "jest": "^29.4.1",
     "jest-watch-typeahead": "^2.2.2",
     "lerna": "^8.1.8",
     "lint-staged": "^15.2.9",
     "mini-css-extract-plugin": "^2.6.1",
     "nyc": "^17.1.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.6.0",
     "readable-stream": "^4.5.2",
     "sass": "^1.54.9",
     "sass-loader": "^16.0.2",
@@ -91,6 +102,7 @@
     "ts-loader": "^9.3.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.4",
+    "typescript-eslint": "^8.35.0",
     "webpack": "^5.99.1",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-server": "^5.1.0"

packages/configtest/src/index.ts

@@ -20,18 +20,18 @@ class ConfigTestCommand {
         const configPaths = new Set<string>();
 
         if (Array.isArray(config.options)) {
-          config.options.forEach((options) => {
+          for (const options of config.options) {
             const loadedConfigPaths = config.path.get(options);
 
             if (loadedConfigPaths) {
-              loadedConfigPaths.forEach((path) => configPaths.add(path));
+              for (const path of loadedConfigPaths) configPaths.add(path);
             }
-          });
+          }
         } else if (config.path.get(config.options)) {
           const loadedConfigPaths = config.path.get(config.options);
 
           if (loadedConfigPaths) {
-            loadedConfigPaths.forEach((path) => configPaths.add(path));
+            for (const path of loadedConfigPaths) configPaths.add(path);
           }
         }
 
@@ -40,7 +40,7 @@ class ConfigTestCommand {
           process.exit(2);
         }
 
-        cli.logger.info(`Validate '${Array.from(configPaths).join(" ,")}'.`);
+        cli.logger.info(`Validate '${[...configPaths].join(" ,")}'.`);
 
         try {
           cli.webpack.validate(config.options);

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

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

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

@@ -1,13 +1,13 @@
-import { type Answers, type ActionType, type FileRecord } from "../../types";
+import { type Answers, type ActionType, type FileRecord } from "../../types.js";
 import { type NodePlopAPI, type DynamicActionsFunction } from "node-plop";
-import { dirname, join, resolve } from "path";
-import { fileURLToPath } from "url";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 
-export default async function (plop: NodePlopAPI) {
+export default async function defaultInitGenerator(plop: NodePlopAPI) {
   const __dirname = dirname(fileURLToPath(import.meta.url));
 
   // dependencies to be installed
-  const devDependencies: Array<string> = ["webpack", "webpack-cli"];
+  const devDependencies: string[] = ["webpack", "webpack-cli"];
 
   await plop.load("../../utils/install-dependencies.js", {}, true);
   await plop.load("../../utils/generate-files.js", {}, true);
@@ -74,7 +74,7 @@ export default async function (plop: NodePlopAPI) {
         type: "confirm",
         name: "isPostCSS",
         message: "Do you want to use PostCSS in your project?",
-        default: (answers: Answers) => answers.cssType == "CSS only",
+        default: (answers: Answers) => answers.cssType === "CSS only",
       },
       {
         type: "list",
@@ -97,7 +97,7 @@ export default async function (plop: NodePlopAPI) {
         },
       },
     ],
-    actions: function (answers: Answers) {
+    actions: function actions(answers: Answers) {
       const actions: ActionType[] = [];
 
       switch (answers.langType) {
@@ -147,7 +147,7 @@ export default async function (plop: NodePlopAPI) {
         devDependencies.push("mini-css-extract-plugin");
       }
 
-      const files: Array<FileRecord> = [
+      const files: FileRecord[] = [
         { filePath: "./index.html", fileType: "text" },
         { filePath: "webpack.config.js", fileType: "text" },
         { filePath: "package.json", fileType: "text" },

packages/create-webpack-app/src/generators/init/react.ts

@@ -1,13 +1,13 @@
-import { type Answers, type ActionType, type FileRecord } from "../../types";
+import { type Answers, type ActionType, type FileRecord } from "../../types.js";
 import { type NodePlopAPI, type DynamicActionsFunction } from "node-plop";
-import { dirname, resolve, join } from "path";
-import { fileURLToPath } from "url";
+import { dirname, resolve, join } from "node:path";
+import { fileURLToPath } from "node:url";
 
-export default async function (plop: NodePlopAPI) {
+export default async function reactInitGenerator(plop: NodePlopAPI) {
   const __dirname = dirname(fileURLToPath(import.meta.url));
 
   // dependencies to be installed
-  const devDependencies: Array<string> = [
+  const devDependencies: string[] = [
     "webpack",
     "webpack-cli",
     "react@18",
@@ -77,7 +77,7 @@ export default async function (plop: NodePlopAPI) {
         type: "confirm",
         name: "isPostCSS",
         message: "Do you want to use PostCSS in your project?",
-        default: (answers: Answers) => answers.cssType == "CSS only",
+        default: (answers: Answers) => answers.cssType === "CSS only",
       },
       {
         type: "list",
@@ -100,7 +100,7 @@ export default async function (plop: NodePlopAPI) {
         },
       },
     ],
-    actions: function (answers: Answers) {
+    actions: function actions(answers: Answers) {
       // setting some default values based on the answers
       const actions: ActionType[] = [];
       answers.htmlWebpackPlugin = true;
@@ -149,7 +149,7 @@ export default async function (plop: NodePlopAPI) {
         devDependencies.push("workbox-webpack-plugin");
       }
 
-      const files: Array<FileRecord> = [
+      const files: FileRecord[] = [
         { filePath: "./index.html", fileType: "text" },
         { filePath: "webpack.config.js", fileType: "text" },
         { filePath: "package.json", fileType: "text" },

packages/create-webpack-app/src/generators/init/svelte.ts

@@ -1,13 +1,13 @@
-import { type Answers, type ActionType, type FileRecord } from "../../types";
+import { type Answers, type ActionType, type FileRecord } from "../../types.js";
 import { type NodePlopAPI, type DynamicActionsFunction } from "node-plop";
-import { dirname, join, resolve } from "path";
-import { fileURLToPath } from "url";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 
-export default async function (plop: NodePlopAPI) {
+export default async function svelteInitGenerator(plop: NodePlopAPI) {
   const __dirname = dirname(fileURLToPath(import.meta.url));
 
   // dependencies to be installed
-  const devDependencies: Array<string> = [
+  const devDependencies: string[] = [
     "webpack",
     "webpack-cli",
     "svelte",
@@ -68,7 +68,7 @@ export default async function (plop: NodePlopAPI) {
         type: "confirm",
         name: "isPostCSS",
         message: "Do you want to use PostCSS in your project?",
-        default: (answers: Answers) => answers.cssType == "CSS only",
+        default: (answers: Answers) => answers.cssType === "CSS only",
       },
       {
         type: "list",
@@ -91,7 +91,7 @@ export default async function (plop: NodePlopAPI) {
         },
       },
     ],
-    actions: function (answers: Answers) {
+    actions: function actions(answers: Answers) {
       // setting some default values based on the answers
       const actions: ActionType[] = [];
       answers.htmlWebpackPlugin = true;
@@ -140,7 +140,7 @@ export default async function (plop: NodePlopAPI) {
         devDependencies.push("mini-css-extract-plugin");
       }
 
-      const files: Array<FileRecord> = [
+      const files: FileRecord[] = [
         { filePath: "./index.html", fileType: "text" },
         { filePath: "./src/assets/webpack.png", fileType: "binary" },
         { filePath: "webpack.config.js", fileType: "text" },