安装后仍然提示Cannot find module ‘webpack-cli‘

部署webpack打包js文件:

webpack  .\src\main.js  .\dist\bundle.js

过程出现报错：

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): y
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
added 185 packages from 127 contributors and audited 186 packages in 94.772s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Error: Cannot find module 'webpack-cli'
Require stack:
- F:\web\vue\nodejs\node_global\node_modules\webpack\bin\webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at F:\web\vue\nodejs\node_global\node_modules\webpack\bin\webpack.js:143:5
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'F:\\web\\vue\\nodejs\\node_global\\node_modules\\webpack\\bin\\webpack.js'
  ]
}

看到有如下warnings：

npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

首先在package.json中加入"private": “true”,再次运行打包代码：

webpack  .\src\main.js  .\dist\bundle.js

仍然报错，但是warnings减少了：

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

这两条warnings在windows系统下可忽略。关键是后面的报错：

Error: Cannot find module 'webpack-cli'
Require stack:
- F:\web\vue\nodejs\node_global\node_modules\webpack\bin\webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at F:\web\vue\nodejs\node_global\node_modules\webpack\bin\webpack.js:143:5
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'F:\\web\\vue\\nodejs\\node_global\\node_modules\\webpack\\bin\\webpack.js'
  ]
}

尝试了网上的各种方法，包括全局安装wabpack和webpack-cli，卸载当前项目的node_modules后重装（npm rm -g webpack-cli, npm i -D webpack-cli）以及安装版本匹配的webpack和webpack-cli，依然出现上述报错。

实在没办法，在网上找到了另一种webpack打包方式。
首先在根目录下新建一个dist文件夹用来装打包后的文件，同时在根目录下新建一个webpackconfig.js文件用来执行打包脚本。该文件内代码如下：

const path = require('path')

let config = {
  mode: 'none',
  entry: {
    main: path.join(__dirname, './src/main.js')
  },
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, './dist')
  }
}

module.exports = config

然后在package.json中的script内添加代码：

"build": "webpack --config webpackconfig.js --progress --colors"

webpack --config path/to/your/file/file.js 表示执行某个配置文件，–progress可以让我们看到打包的进度 ， --colors 开启命令行颜色显示。

然后在终端执行：npm run build，执行完毕后，在根目录下的 dist 文件夹生成了main.bundle.js文件，webpack打包成功。在html的head中引入该文件即可生效。