首次配置Laravel项目时npm run dev报错的解决求助

看起来你遇到的是Laravel Mix与Webpack 5版本不兼容导致的连锁问题，我来一步步帮你解决：

问题根源分析 #

1. --hide-modules参数报错：Webpack 5（对应webpack-cli 4+）已经移除了这个旧参数，但你项目里的Laravel Mix版本还在使用它，所以触发了参数不识别的错误。
2. Can't resolve './src'错误：Webpack 5默认的入口文件路径是./src，但Laravel项目的资源目录默认是resources/js，当Mix配置没正确覆盖Webpack默认入口时，就会出现找不到模块的问题。

解决方案：两种可选路径 #

路径一：升级Laravel Mix到支持Webpack 5的版本（推荐长期方案） #

Laravel Mix 6及以上版本已经完全适配Webpack 5，同时简化了脚本配置，步骤如下：

1. 卸载旧版Laravel Mix

npm uninstall laravel-mix

2. 安装最新版Laravel Mix

npm install laravel-mix@latest --save-dev

3. 更新package.json中的scripts字段
   把原来的dev/development脚本替换成Mix 6官方推荐的配置：

"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
}

4. 确保webpack.mix.js配置正确
   你的配置文件需要指向Laravel默认的资源入口，示例如下：

const mix = require('laravel-mix');

// 基础配置：编译JS和CSS
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

// 如果项目使用Vue，需要添加.vue()
// mix.js('resources/js/app.js', 'public/js').vue();

路径二：降级Webpack到兼容旧版Mix的版本（快速临时方案） #

如果你不想升级Laravel Mix，可以把Webpack和webpack-cli降级到支持--hide-modules参数的版本：

1. 卸载当前的Webpack和webpack-cli

npm uninstall webpack webpack-cli

2. 安装兼容的Webpack 4.x和webpack-cli 3.x

npm install webpack@4 webpack-cli@3 --save-dev

最后收尾步骤 #

不管选哪种路径，都建议执行以下操作确保依赖完全生效：

• 删除项目根目录下的node_modules文件夹和package-lock.json文件
• 重新执行npm install安装依赖
• 再次运行npm run dev测试

这样应该就能解决你遇到的两个错误了。

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