webpack执行serve命令报错Error: Cannot find module 'serve'求助

问题根因 #

报错是你的webpack配置文件中动态加载配置的逻辑导致的：
当执行webpack serve命令时，Node进程的参数数组process.argv的第3项（下标为2）的值为字符串serve，代码会直接尝试加载名为serve的npm包，你的项目中没有安装该包，因此触发MODULE_NOT_FOUND错误。

解决方案 #

1. 修复动态加载配置的逻辑 #

将webpack.config.js中原有的这段逻辑：

if (process.argv[2]) {
  config = require(`${process.argv[2]}`)
}

修改为带参数标识的判断逻辑，避免和webpack自带的命令参数冲突，示例修改如下：

// 只有传入指定标识时才加载自定义配置
const customConfigFlag = '--custom-config'
const flagIndex = process.argv.indexOf(customConfigFlag)
if (flagIndex !== -1 && process.argv[flagIndex + 1]) {
  const customConfigPath = path.resolve(__dirname, process.argv[flagIndex + 1])
  config = require(customConfigPath)
}

修改后如果需要传入自定义配置，运行命令格式改为：
webpack serve --custom-config 你的自定义配置文件路径

2. 清理废弃配置（可选） #

你使用的是webpack-dev-server 4.x版本，devServer.contentBase配置已经废弃，你已经配置了static.directory，直接删除contentBase: path.join(__dirname, 'public')这一行即可消除后续启动时的废弃警告。

修改完成后重新运行webpack serve即可正常启动服务。

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