在Webpack中导入Vite模块时构建失败的问题咨询

API 探路者

2026-8-1

为什么在Webpack中导入Vite模块会报错？

直接在Webpack项目里导入Vite模块本身就是错误的思路，核心原因是Vite和Webpack是两套完全独立的构建工具栈，设计目标与运行逻辑完全不兼容，具体错误对应的原因如下：

Vite的依赖不适合被Webpack编译
Vite本身是完整的构建工具，内部依赖esbuild、Rollup等底层工具，这些工具的代码是为Vite自身的运行环境编写的，并非为了被Webpack打包处理。Webpack试图解析Vite的内部依赖时，自然会出现各种兼容问题。
esbuild的动态导入触发Webpack警告
你看到的Critical dependency: the request of a dependency is an expression警告，是因为esbuild内部使用了动态依赖加载（比如根据运行环境动态require不同模块），而Webpack依赖静态分析依赖树，无法处理这种动态逻辑，因此抛出警告。
可选依赖pnpapi不存在
Can't resolve 'pnpapi'是因为esbuild支持Yarn的PnP包管理模式，但你的项目未启用该模式，Webpack找不到这个可选依赖。这说明Vite的依赖树包含了针对特定包管理器的代码，不适合在普通Webpack项目中加载。
TypeScript配置冲突
TS18002: The 'files' list in config file 'tsconfig.json' is empty错误，是因为ts-loader会处理node_modules里的.d.ts文件，而esbuild自身的tsconfig可能为空，不符合ts-loader的处理预期，导致编译失败。