webpack 编译后出现 ENAMETOOLONG: name too long

2024-12-09 216 阅读1分钟

异常表现

页面出现 error 414 请求
webpack 编译页面出现 ENAMETOOLONG: name too long, stat 'xxx/xx/xx'

原因 & 方案

本地开发的时候，文件路径过长，导致 webpack 访问本地缓存出现过长的请求，所以 webpack 需要配置别名。

const appDir = fs.realpathSync(process.cwd());
const src = path.resolve(appDir, "src");
 resolve: {
      extensions: paths.moduleFileExtensions.map(ext => `.${ext}`),
      alias: {
        "@": src, 
      },
},

同时需要将所有的 ../ 之类的 import 路径修改成 @/ 等别名的方式，

// before
import App from "../../App.jsx"

// after
import App from "@/component/App.jsx"