部署首个Angular应用时webpack生产环境报错：window is not defined

嘿，我之前部署Angular项目时也碰到过这种摸不着头脑的情况！你现在的问题是Webpack执行生产构建命令时只输出了开头的Hash、Version这些基础信息，却没显示导致构建失败的具体错误对吧？别慌，咱们一步步来排查解决：

• 让Webpack输出完整错误详情
  直接在你原来的命令后面加上--display-error-details参数，强制Webpack输出详细的错误信息，这样就能知道到底是哪里出问题了。修改后的命令如下：

  node node_modules/webpack/bin/webpack.js --mode=production --env.prod --display-error-details
  

  或者简化版：

  webpack --mode=production --config webpack.config.js --env.prod --display-error-details
  

  这个参数会帮你暴露隐藏的错误，比如依赖缺失、配置文件语法错误、loader配置问题等等。

• 检查Webpack配置的日志输出设置
  打开你的webpack.config.js文件，看看有没有设置stats选项。如果这个选项被设为errors-only、minimal这类限制输出的取值，会导致Webpack不打印完整错误。可以把它改成verbose或者直接删掉这个配置，让Webpack输出完整日志：

  module.exports = {
    // ...其他配置
    stats: 'verbose' // 或者移除这行用默认值
  };
  

• 优先使用Angular CLI的官方构建命令
  如果你是用Angular CLI创建的项目，其实没必要手动写Webpack命令，Angular已经帮你封装好了最优的构建配置。直接运行官方推荐的生产构建命令会更稳妥：

  ng build --prod
  

  这个命令会自动处理Webpack的配置、代码压缩、Tree Shaking等生产环境需要的操作，出错时也会输出清晰的错误提示。

• 排查依赖冲突问题
  如果上面的方法都没找到问题，可以试试删除项目根目录下的node_modules文件夹和package-lock.json（或yarn.lock）文件，然后重新执行：

  npm install
  

  有时候旧的依赖缓存或者版本冲突会导致构建失败，重新安装依赖能解决这类隐性问题。

先试试第一个方法添加错误详情参数，基本就能定位到具体问题了，然后针对性修复就行！

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