执行webpack --mode development时main.ts报document未定义错误求助

看起来你在直接用Webpack构建Angular项目时遇到了环境匹配的问题，而且从错误日志来看，核心问题出在html-webpack-plugin的配置上。让我一步步帮你解决：

问题根源分析 #

从错误信息里的./node_modules/html-webpack-plugin/lib/loader.js!./src/main.ts可以看出，html-webpack-plugin正在把你的main.ts文件当成HTML模板来处理——这显然不对！这个插件的作用是把打包后的JS文件注入到HTML模板里，而不是处理TS入口文件。另外，Webpack如果没有正确设置目标环境为浏览器，也会把代码当成Node.js环境执行，而Node里不存在document对象，这就导致了ReferenceError。

具体解决方案 #

1. 修正html-webpack-plugin的配置 #

打开你的webpack.config.js，找到HtmlWebpackPlugin的配置项，确保它指向的是一个HTML模板文件（比如src/index.html），而不是你的main.ts：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 其他配置...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 这里必须是HTML模板文件
      filename: 'index.html',
      inject: 'body' // 将打包后的JS注入到body末尾，确保DOM加载完成后再执行
    }),
  ]
};

你的index.html模板可以是一个基础的HTML文件，比如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angular App</title>
</head>
<body>
  <app-root></app-root> <!-- Angular应用的根组件挂载点 -->
</body>
</html>

2. 确保Webpack目标环境为浏览器 #

在webpack.config.js中明确设置target为web，让Webpack知道要针对浏览器环境打包：

module.exports = {
  target: 'web', // 这是默认值，但如果被修改过需要手动设置
  // 其他配置...
};

3. （可选）推荐使用Angular CLI构建 #

如果你是从零开始搭建Angular项目，更推荐使用官方的Angular CLI来创建和构建项目，它已经帮你配置好了所有Webpack相关的细节，不需要手动配置：

# 创建新项目
ng new my-angular-app
# 启动开发服务器
ng serve

验证修复 #

完成配置修改后，重新执行：

webpack --mode development

然后在浏览器中打开生成的index.html文件，应该就能正常启动Angular应用了。

内容的提问来源于stack exchange，提问作者Bishnu Kumar Bhakat