使用webpack-dev-server时找不到模块'webpack'

Question

尝试使用此教程熟悉聊天应用程序。

一切看起来都很好，但是当我按照最后的说明尝试运行npm run watch时，我遇到了一个与npm有关的错误，并提到错误不在npm中。

这个watch脚本是为了运行以下脚本而创建的：

webpack-dev-server --compress --history-api-fallback --progress --host 0.0.0.0 --port 3005

当我尝试使用npx运行这一行时，出现以下错误：

Cannot find module 'webpack'
Require stack:
- /home/user/.npm/_npx/47997/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js

这是我的webpack.config.js配置文件:

module.exports = {
  devtool: 'source-map',
  entry: './src/index.tsx',
  output: {
    filename: './build/client.js',
  },
  resolve: {
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },

  module: {
    loaders: [{ test: /\.tsx?$/, loader: 'ts-loader' }]
  }
};

我曾多次尝试安装 webpack 和 webpack-cli，但都无法解决错误。我已经尝试删除 node_modules 和 package-lock.json，然后重新安装模块，但仍然没有任何变化。有什么建议吗？

添加 package.json：

{
  "name": "rcweb",
  "version": "1.0.0",
  "description": "rcweb",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack-dev-server --compress --history-api-fallback --progress --host 0.0.0.0 --port 3005"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^17.0.3",
    "@types/react-redux": "^7.1.16",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "ts-loader": "^8.0.17",
    "typescript": "^4.2.3",
    "webpack": "^5.24.4",
    "webpack-cli": "^4.5.0",
    "webpack-dev": "^1.1.1"
  }
}

- rdrgtec

---

请提供您的 package.json 文件。 - zhulien

我认为你需要安装webpack-cli和webpack-dev-server。你也可以在命令前加上“npx”来尝试。 - Pablo Darde

@zhulien编辑后添加了Package.json文件。 - rdrgtec

webpack is listed as a peer dependency, so npx should work with npm@^7.0.0 - MinusFour

Answer 1

你需要安装webpack-dev-server而不是webpack-dev。更新你的package.json，然后删除你的node_modules并重新执行npm install。

另外，我不确定将React和相关组件作为devDependencies是否是一个很好的主意，因为它们在运行时使用，但这取决于你的捆绑构建和配置。

- zhulien

Answer 2

好的，根据Package.json文件，我认为缺少安装webpack-dev-server。

在我安装了它之后，错误信息变成了：

Cannot find module 'webpack-cli/bin/config-yargs'

阅读一些关于它的内容，有些主题提到了版本，但我相信所有webpack组件都是最新的:

webpack 5.24.4
webpack-cli 4.5.0
webpack-dev-server 3.11.2

仍然存在这个问题...

- rdrgtec