webpack-cli VS webpack-dev-server

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

So I spent couple hours to sort the bug report out properly :) https://github.com/webpack/webpack-dev-server/issues/4890

Webpacker also includes webpack-dev-server, so we made it work as well. Since I had Simpacker installed, I only had to change the devServer part in webpack.config.js to make it work with npm scripts.

current setup doesn't provide us a developer friendly environment, we need to check the index.html file every time we make a change, to resolve this we'll use webpack-dev-server.

It looks like you don't have webpack-dev-server setup. That's what will allow you to have that seamless dev experience.

esbuild-loader (secret sauce!) fork-ts-checker-webpack-plugin (helps us with typechecking) nodemon-webpack-plugin (We can also use webpack-dev-server)

Webpack Dev Server provides a live reload feature without having you to build & wait.

webpack-dev-server - Development server for webpack