使用webpack-dev-server启动项目时找不到webpack模块的报错咨询

• 你遇到的Cannot find module 'webpack'报错本质和npm本身无关，核心问题有三个：
  • 项目本地依赖列表缺失webpack-dev-server。查看你提供的package.json，devDependencies里只包含了webpack、webpack-cli、webpack-dev，其中webpack-dev是已停止维护的早期webpack开发辅助工具，和现在常用的webpack-dev-server功能、包结构完全不同，属于误装的冗余依赖。
  • 你之前反复删除node_modules、重装依赖始终无效，是因为不管重装多少次，package.json的列表里都没有webpack-dev-server条目，项目本地永远不会生成对应命令的可执行文件。
  • 直接用npx执行本地不存在的webpack-dev-server命令时，npx会自动把最新版的webpack-dev-server下载到全局临时缓存目录（也就是报错路径里的/home/user/.npm/_npx/47997/），这个缓存目录没有配套安装webpack依赖，就会触发模块找不到的报错。

• 清理无效依赖
  先删掉项目里误装的废弃包，执行命令：

  npm uninstall webpack-dev
  

• 安装版本兼容的依赖组合
  你当前使用的是webpack 5.24.4版本，不要直接安装最新版webpack-dev-server（v4+版本对Node.js、webpack-cli的版本要求更高，容易触发额外兼容问题），直接安装匹配的稳定兼容版本：

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

• 修正webpack配置的语法兼容问题
  你当前的webpack.config.js使用的是webpack 4时代的老写法，webpack 5已经完全废弃了module.loaders配置项，需要将原来的loader配置替换为module.rules写法，修正后的module部分配置如下：

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

• 验证运行
  所有修正完成后，直接执行项目内配置的npm run watch即可，此时命令会优先读取项目本地node_modules下的可执行文件，不会再触发npx临时缓存的路径解析逻辑。

• 不要在项目本地依赖未安装完成的情况下直接用npx执行命令，npx的临时缓存机制会跳过项目本地的依赖路径解析，一旦缓存目录的依赖版本不匹配，就会出现难以排查的模块找不到报错。
• 安装webpack开发依赖时，要保证webpack、webpack-cli、webpack-dev-server三个包的版本适配，不要零散单独安装某一个包，避免peerDependency冲突。

内容的提问来源于stack exchange，提问作者rdrgtec