Question

我正在运行npm run dev命令来运行我的React应用。但是，它将弹出此Error: Cannot find module 'webpack/bin/config-yargs'。我用谷歌搜索了这个错误。解决此错误的许多人告诉我安装webpack和webpack-cli。因此，我去安装了webpack和webpack-cli。但是，错误仍然弹出。请帮助！

我已经尝试了几种解决方案，例如 Cannot find module 'webpack/bin/config-yargs' 还有这个 How to solve 'Cannot find module 'webpack-cli/bin/config-yargs' error in reactjs? 现在，我已经安装了webpack和webpack-cli。

我的命令

C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master>npm run dev

> truffle-init-webpack@0.0.2 dev C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master
> webpack-dev-server

internal/modules/cjs/loader.js:613
    throw err;
    ^

Error: Cannot find module 'webpack/bin/config-yargs'
Require stack:
- C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15)
    at Function.Module._load (internal/modules/cjs/loader.js:526:27)
    at Module.require (internal/modules/cjs/loader.js:666:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master\node_modules\webpack-dev-server\bin\webpack-dev-server.js:54:1)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:824:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! truffle-init-webpack@0.0.2 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the truffle-init-webpack@0.0.2 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ASUS\AppData\Roaming\npm-cache\_logs\2019-08-30T09_10_59_739Z-debug.log

我的package.json

{
  "name": "truffle-init-webpack",
  "version": "0.0.2",
  "description": "Frontend example using truffle v3",
  "scripts": {
    "lint": "eslint ./",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "author": "Douglas von Kohorn",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-core": "^6.26.3",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-register": "^6.22.0",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^3.2.0",
    "eslint": "^3.14.0",
    "eslint-config-standard": "^6.0.0",
    "eslint-plugin-babel": "^4.0.0",
    "eslint-plugin-mocha": "^4.8.0",
    "eslint-plugin-promise": "^3.8.0",
    "eslint-plugin-standard": "^2.0.0",
    "html-webpack-plugin": "^2.28.0",
    "json-loader": "^0.5.4",
    "style-loader": "^0.13.1",
    "truffle-contract": "^1.1.11",
    "web3": "^0.20.7",
    "webpack": "^4.0.0",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^2.11.5"
  },
  "dependencies": {
    "ajv": "^5.5.2",
    "boostrap": "^2.0.0",
    "bootstrap": "^4.3.1",
    "ipfs-api": "^19.0.0",
    "jquery": "^3.4.1",
    "node-sass": "^4.8.3",
    "popper.js": "^1.15.0",
    "postcss-loader": "^2.1.6",
    "precss": "^3.1.2",
    "sass-loader": "^6.0.7"
  }
}

Answer 1

我遇到了同样的问题，是因为 webpack 版本不稳定我用的是低版本，问题解决了

<块引用>

npm install webpack@4.32.2 --save-dev

<块引用>

npm install webpack-cli@3.3.2 --save-dev

<块引用>

npm install webpack-dev-server@3.5.1 --save-dev

Answer 2

尝试以下操作。它对我有用

“脚本”：{ "lint": "eslint ./", "build": "webpack", "dev": "webpack 服务" },

Answer 3

在您的 package.json 文件中，只需将 "dev": "webpack-dev-server" 更改为 "dev": "webpack serve"

Answer 4

我认为它仅与webpack版本有关。您能否将webpack，webpack-cli和webpack-dev-server更新为最新版本并进行检查。

希望这对您有用！

Answer 5

如果您遇到此处所述问题的错误：https://github.com/webpack/webpack-dev-server/issues/2029

我编写了一个python脚本来修复该问题，直到将其修补为止。

将文件添加到项目后，只需将命令添加到package.json脚本即可（假设您已安装python）。

https://github.com/bigbizze/FixWebPackError-Cannot-find-module-webpack-cli-bin-config-yargs

Answer 6

我遇到了同样的问题，试试 npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge

Answer 7

在 package.json 中使用 "dev":"webpack serve" 而不是 "webpack-dev-server"

Answer 8

暂时不要玩正在学习的 webpack 模块，因为做这些事情很棘手。

<块引用>

我有你之前列出的同样问题

// change your mode to development in package.json
// make everything in devDependencies
{
  "name": "timer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    ...
  }
}

在你的 webpack.config 中

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  },
    module: {
      rules: [
        { test: /\.(js)$/, use: 'babel-loader' },
        { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
      ]
    },
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
}

这可能对你有用。

解决方法：找不到模块'webpack / bin / config-yargs'

8 个答案: