AngularJS+MVC项目ng build报错：emitting index-html-webpack-plugin EISDIR

嘿，我之前也碰到过类似的webpack目录操作错误，大概率是构建过程中把目录当成文件来读写导致的，给你几个具体的排查和解决步骤：

• 检查Angular构建输出路径配置
  先打开你的angular.json文件，找到projects -> [你的项目名称] -> architect -> build -> options -> outputPath这个配置项。确保它指向的是一个目录路径，而不是某个具体的文件（比如误写成了ASP.NET MVC的视图文件路径）。举个正确的例子：

  "outputPath": "../YourMvcProject/ClientApp/dist"
  

  如果这里设成了类似../YourMvcProject/Views/Home/Index.cshtml的文件路径，webpack就会试图把构建内容写入到一个文件里，自然会触发目录操作的错误。

• 彻底清理构建缓存与旧文件
  缓存的构建文件经常会搞出奇怪的问题，先手动清理掉旧的构建产物和缓存：

  # 删除dist目录（Linux/Mac）
  rm -rf dist/
  # 删除webpack缓存目录
  rm -rf node_modules/.cache
  # 重新执行生产构建
  ng build --prod
  

  如果是Windows系统，用PowerShell的话换成以下命令：

  Remove-Item -Recurse -Force dist\
  Remove-Item -Recurse -Force node_modules\.cache
  ng build --prod
  

• 排查自定义的index-html-webpack-plugin配置
  如果你项目里手动配置了这个插件，检查一下template（模板文件路径）和filename（输出文件名）这两个参数，千万别把它们指向目录。比如错误配置可能是：

  new IndexHtmlWebpackPlugin({
    filename: './dist/' // 这里是目录，错误！
  })
  

  正确的应该是指向具体的html文件：

  new IndexHtmlWebpackPlugin({
    filename: './dist/index.html'
  })
  

• 确认目标目录的权限与占用情况
  有时候ASP.NET MVC的发布目录被IIS Express、文件资源管理器或者其他进程占用，导致webpack无法正常读写文件。先关闭所有相关进程，再检查当前用户对目标目录有没有读写权限——权限不足也可能触发这类奇怪的IO错误。

• 检查文件/目录名称的大小写问题
  Windows系统不区分文件名大小写，但webpack的处理逻辑是区分的。比如你在配置里写了outputPath: '../MvcProject/clientapp/dist'，但实际目录是../MvcProject/ClientApp/dist，就可能导致webpack误把目录当成文件处理，统一一下大小写就能解决。

如果以上步骤都试过还是不行，可以尝试更新Angular CLI和相关依赖（npm update @angular/cli），或者创建一个全新的Angular项目，把代码逐步迁移过去，排查是不是项目配置文件损坏导致的问题。

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