`npm run` does not support with webpack - npm

Question

I'm working on a web pack based project. I use npm runto check my interface.
Below is my package.json file content.
"scripts": {
"build": "webpack --config webpack.config.prod.js",
"start": "webpack --config webpack.config.dev.js"
},
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.1",
"raw-loader": "^0.5.1",
"sass": "^1.29.0",
"sass-loader": "^10.1.0",
"script-loader": "^0.7.2",
"style-loader": "^2.0.0",
"webpack": "^5.9.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.4.0"
}
below is my webpack.config.dev.js file content.
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { default: merge } = require("webpack-merge")
const superConfig = require('./webpack.config');
module.exports=merge(superConfig,{
devServer:{
port: 3000
},
devtool: false,
mode:'development',
plugins:[new MiniCssExtractPlugin({
filename: 'main.css'
})]
})
In here I have mentioned the port 3000 for npm run.
But
the terminal shows
(node:11002) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
[webpack-cli] Compilation finished
assets by status 2.81 MiB [cached] 15 assets
assets by path . 1.28 MiB
asset main.css 751 KiB [compared for emit] (name: main)
asset main.bundle.js 542 KiB [compared for emit] (name: main)
asset index.html 14.4 KiB [compared for emit]
Entrypoint main 1.26 MiB (2.81 MiB) = main.css 751 KiB main.bundle.js 542 KiB 15 auxiliary assets
runtime modules 931 bytes 4 modules
cacheable modules 530 KiB
modules by path ./node_modules/ 529 KiB
modules by path ./node_modules/admin-lte/plugins/ 472 KiB 8 modules
2 modules
modules by path ./src/ 971 bytes
./src/index.js 465 bytes [built] [code generated]
./src/js/menu.js 456 bytes [built] [code generated]
./src/scss/style.scss 50 bytes [built] [code generated]
css modules 751 KiB
modules by path ./node_modules/admin-lte/plugins/ 77.5 KiB
css ./node_modules/css-loader/dist/cjs.js!./node_modules/admin-lte/plugins/fontawesome-free/css/all.min.css 58 KiB [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/admin-lte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css 19.5 KiB [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/admin-lte/dist/css/adminlte.min.css 673 KiB [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/style.scss 0 bytes [code generated]
webpack 5.9.0 compiled successfully in 5050 ms
and 3000 port doesn't support. But when I open the index.html file in the dist folder it opens very well without any issue.

Answer 1

OK, I got the answer. The solution is to change
"start": "webpack --config webpack.config.dev.js"
to
"start": "webpack serve --config webpack.config.dev.js"
in the package.json file.