webpack-cli VS clean-webpack-plugin

Unable to load '@webpack-cli/serve' command

webpack-cli(v5.0.1): enables you to use the command-line interface of the Webpack

$ npm run build > [email protected] build > webpack CLI for webpack must be installed. webpack-cli (https://github.com/webpack/webpack-cli) We will use "npm" to install the CLI via "npm install -D webpack-cli". Do you want to install 'webpack-cli' (yes/no): yes

$ npx webpack --force CLI for webpack must be installed. webpack-cli (https://github.com/webpack/webpack-cli) We will use "npm" to install the CLI via "npm install -D webpack-cli". Do you want to install 'webpack-cli' (yes/no): y Installing 'webpack-cli' (running 'npm install -D webpack-cli')... npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/webpack npm ERR! peer webpack@"^5.1.0" from [email protected] npm ERR! node_modules/terser-webpack-plugin npm ERR! terser-webpack-plugin@"^5.1.3" from [email protected] npm ERR! dev webpack@"^5.72.1" from the root project npm ERR! 1 more (webpack-cli) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer webpack@"1 || 2 || ^2.1.0-beta || ^2.2.0-rc" from [email protected] npm ERR! node_modules/babel-loader npm ERR! dev babel-loader@"^6.2.1" from the root project npm ERR! npm ERR! Conflicting peer dependency: [email protected] npm ERR! node_modules/webpack npm ERR! peer webpack@"1 || 2 || ^2.1.0-beta || ^2.2.0-rc" from [email protected] npm ERR! node_modules/babel-loader npm ERR! dev babel-loader@"^6.2.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /home/oog/.npm/eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! /home/oog/.npm/_logs/2022-06-01T19_32_07_335Z-debug-0.log undefined

// Generated using webpack-cli https://github.com/webpack/webpack-cli const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const isProduction = process.env.NODE_ENV == "production"; const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader"; const config = { entry: "./src/index.ts", output: { path: path.resolve(__dirname, "dist"), }, devServer: { open: true, host: "localhost", }, plugins: [ new HtmlWebpackPlugin({ template: "index.html", }), // Add your plugins here // Learn more about plugins from https://webpack.js.org/configuration/plugins/ ], module: { rules: [ { test: /\.(ts|tsx)$/i, loader: "ts-loader", exclude: ["/node_modules/"], }, { test: /\.css$/i, use: [stylesHandler, "css-loader"], }, { test: /\.s[ac]ss$/i, use: [stylesHandler, "css-loader", "sass-loader"], }, { test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, type: "asset", }, // Add your rules for custom modules here // Learn more about loaders from https://webpack.js.org/loaders/ ], }, resolve: { extensions: [".tsx", ".ts", ".js"], }, }; module.exports = () => { if (isProduction) { config.mode = "production"; config.plugins.push(new MiniCssExtractPlugin()); } else { config.mode = "development"; } return config; };

Let's install webpack and webpack-cli, we'll be using Webpack 5

webpack/webpack-cli repo issue: Error when run npm start: Class constructor ServeCommand cannot be invoked without 'new' #2272

throw new Error(`clean-webpack-plugin only accepts an options object. See: ^Error: clean-webpack-plugin only accepts an options object. See: https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional at new CleanWebpackPlugin (C:\Users\Eson\Desktop\pwa-vue-app-1\node\_modules\clean-webpack-plugin\dist\clean-webpack-plugin.js:27:13) at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\webpack.config.js:56:5) at handleFunction (C:\Users\Eson\Desktop\pwa-vue-app-1\node\_modules\webpack-cli\bin\utils\prepareOptions.js:21:13) at prepareOptions (C:\Users\Eson\Desktop\pwa-vue-app-1\node\_modules\webpack-cli\bin\utils\prepareOptions.js:9:5) at requireConfig (C:\Users\Eson\Desktop\pwa-vue-app-1\node\_modules\webpack-cli\bin\utils\convert-argv.js:119:14) at C:\Users\Eson\Desktop\pwa-vue-app-1\node\_modules\webpack-cli\bin\utils\convert-argv.js:125:17 at Array.forEach () at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\node\_modules\webpack-cli\bin\utils\convert-argv.js:123:15) at Object. (C:\Users\Eson\Desktop\pwa-vue-app-1\node\_modules\webpack-dev-server\bin\webpack-dev-server.js:79:40) at Module.\_compile (internal/modules/cjs/loader.js:776:30) at Object.Module.\_extensions..js (internal/modules/cjs/loader.js:787:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module.\_load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:829:12) at startup (internal/bootstrap/node.js:283:19) if i delete line 56 in webpack.config.js i can run the web application without problems, but i want to understand the source of this issue

clean-webpack-plugin - Remove/clean build folders