webpack-cli VS html-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

now we have a dist directory. inside of dist we have main.js file, to execute the file in browser we need to add it as a script in a html file. Instead of doing it manually, we'll take the help of html-webpack-plugin.

Let’s say you use Webpack HtmlWebpackPlugin to produce a static HTML file from a template you have, but sometimes that’s not enough. This page that you’re producing is that main static page for your SPA (Single Page Application) and aside from the processed bundles, versioning etc. you would like it to have other runtime data that concerns your entire site, for instance some sort of a configuration (not secret, god forbids) that needs to be available for scripts on the client.

If you are using webpack you can use the meta option from the HtmlWebpackPlugin to add the social meta meta tags to your web page:

Injecting those script tags is normally done via https://github.com/jantimon/html-webpack-plugin

Look at the html-webpack-plugin. (https://github.com/jantimon/html-webpack-plugin#options) I think you need to manualy injects tags by setting inject to false and using htmlWebpackPlugin.files directly in your HTML template.

html-webpack-plugin - Generate HTML files from template