Error Overlay Webpack Plugin 可在浏览器页面直接显示错误覆盖层并点击跳转源码行。需安装插件、配置 plugins 和 devtool，TypeScript 项目还需设置 "noEmit": true 并确保 resolve.extensions 包含 '.ts'、'.tsx'。
用 Error Overlay Webpack Plugin 就能直接在浏览器页面上弹出错误覆盖层，点一下就跳转到对应代码行，不用来回切控制台和编辑器。
安装插件很简单
在项目根目录运行：
npm install error-overlay-webpack-plugin --save-dev- 或者用 yarn：
yarn add error-overlay-webpack-plugin --dev
Webpack 配置里加一行
打开 webpack.config.js，在 plugins 数组中引入并使用它：
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
module.exports = {
// 其他配置...
plugins: [
new ErrorOverlayPlugin()
],
devtool: 'cheap-module-source-map' // 必须启用 source map 才能准确定位
};
TypeScript 项目要额外注意两点
错误覆盖层依赖源码映射准确，TypeScript 项目需确保：
-
tsconfig.json中设"noEmit": true，让类型检查交给 Webpack，避免重复编译干扰 sourcemap - Webpack 的
resolve.extensions包含'.ts'和'.tsx'，否则错误堆栈可能指向生成的 JS 文件而非 TS 源码
配合 Webpack Dev Server 使用
如果你用 webpack-dev-server，插件会自动生效。启动开发服务后，任意语法错误（比如 const a = ;）都会立刻以半透明弹层形式浮现在页面顶部，显示文件路径、行号和错误描述，点击错误行即可在 VS Code 或 WebStorm 中打开对应位置。
