webpack-cli VS esbuild-loader

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

i see. there are a loaders like https://github.com/privatenumber/esbuild-loader that works with webpack but i haven't given it a try yet.

you can use it with webpack didn't try it myself

If you are a webpack user and have heard about esbuild speed, you may start questioning your js-bundler choices. Luckily, you don't have to drop your hand-crafted webpack config just now. Thanks to esbuild-loader, you can get part of the speed improvement without doing a whole migration.

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

For people already on webpack, there's esbuild-loader (https://github.com/privatenumber/esbuild-loader)

esbuild is a JS and TS bundler that promises ultra-fast build times. We use webpack, and there is support to leverage esbuild with esbuild-loader.

The first thing I did was replace babel-loader and Terser (minification tool) with esbuild-loader. This made our JS compile around 12 times faster, it went down to 1.4 seconds. It was a good start.

In fact, the create-react-app-esbuild is only an encapsulation of esbuild-loader.

I just started using this: privatenumber/esbuild-loader: ⚡️ Speed up your Webpack build with esbuild (github.com)

Both would be good to file. I’m happy to investigate myself if you don’t have the time.

One thing to be aware of is that some other tools that integrate esbuild do so incorrectly. For example, the 3rd-party integration of esbuild into Webpack mis-configures esbuild in a way that causes issues with JSX: https://github.com/privatenumber/esbuild-loader/pull/107. This isn’t a problem with esbuild itself.