`npm 运行` 不支持 webpack

Question

我正在做一个基于 web pack 的项目。我使用 npm run 检查我的界面。

下面是我的package.json文件内容。

  "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"
  }

下面是我的webpack.config.dev.js文件内容。

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'
    })]
})

在这里我提到了 npm run 的端口 3000。

但是终端机显示

(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

不支持3000端口。但是当我打开 dist 文件夹中的 index.html 文件时，它打开得很好，没有任何问题。

Answer 1

好的，我得到答案了。解决办法是改

"start": "webpack --config webpack.config.dev.js"

至

"start": "webpack serve --config webpack.config.dev.js"

in the package.json file.

`npm 运行` 不支持 webpack

`npm run` does not support with webpack

localhost

npm

webpack