使用Symfony+VueJs开发网站执行Encore命令时遇Webpack错误

我之前也碰到过一模一样的问题，本质都是依赖版本不兼容搞出来的——Tapable的废弃警告是因为部分包还在使用旧API，而neo-async的回调重复调用则是异步流程因版本冲突出现的异常。下面是亲测有效的解决步骤：

1. 彻底清理并重装依赖 #

损坏的依赖缓存或版本冲突是这类问题的常见源头，先把旧的依赖文件全部清掉：

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json yarn.lock

# 重新安装依赖（根据你用的包管理器选一个）
npm install
# 或者
yarn install

2. 确保Encore与Webpack版本匹配 #

Symfony Encore对Webpack版本有严格的兼容性要求：

• Encore v1.x 适配 Webpack 4
• Encore v2.x 适配 Webpack 5

如果你的项目还在使用旧版Encore，建议直接升级到最新版（适配Webpack 5），能从根源解决Tapable的API问题：

npm install @symfony/webpack-encore@latest --save-dev

升级后记得检查你的webpack.config.js，Encore v2有一些API变化（比如enableVueLoader()的调用方式、入口配置等），调整成新版要求的写法即可。

3. 更新相关插件到兼容版本 #

如果升级Encore后还有Tapable警告，那可能是vue-loader、babel-loader这类插件版本过低，不兼容Webpack 5的新API，更新它们：

# 更新Vue相关插件
npm install vue-loader@latest vue-template-compiler@latest --save-dev

# 更新Babel相关插件
npm install babel-loader@latest @babel/core@latest --save-dev

4. 重新运行dev-server #

完成以上步骤后，再次执行你的启动命令，大概率就能正常运行了：

./node_modules/.bin/encore dev-server --https --port 9000

如果还是有缓存相关的问题，可以加上--no-cache参数强制禁用缓存：

./node_modules/.bin/encore dev-server --https --port 9000 --no-cache

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