npm 包 error-overlay-webpack-plugin 使用教程

在前端开发中，webpack 是一个不可或缺的工具。然而，在调试代码的时候，我们经常会遇到一些错误信息，有时候这些错误信息可能会让我们看得眼花缭乱。有了 npm 包 error-overlay-webpack-plugin，可以帮助我们更快地定位和解决问题。

什么是 error-overlay-webpack-plugin？

error-overlay-webpack-plugin 是一个 webpack 插件，它可以帮助我们更清晰地展示包含错误的源代码，并提供我们所需的所有上下文信息，比如误报的行和列、代码片段、文件名等等。

安装

使用 npm 安装 error-overlay-webpack-plugin：

npm install --save-dev error-overlay-webpack-plugin

用法

在 webpack 配置中使用 error-overlay-webpack-plugin：

const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');

module.exports = {
  // ...
  devtool: 'cheap-module-source-map',
  plugins: [new ErrorOverlayPlugin()],
  // ...
};

这样，在启动 webpack-dev-server 的时候，如果你的代码包含了错误，就会在浏览器中看到如下信息：

在错误信息卡片的右下角，你会发现一个按钮，可以像下面这样显示详细错误信息：

配置项

error-overlay-webpack-plugin 提供了一些可配置的选项：

你可以通过在实例化插件时传入选项对象来定制这些选项，例如：

-- -------------------- ---- -------
  -------- -
    --- --------------------
      -------------- -
        -------- -
          ----------------- -------- -- -- ------
        -
      --
      --------------- ----
    --
  --

示例代码

这里提供一个示例，演示如何在 webpack-dev-server 中使用 error-overlay-webpack-plugin。

首先，安装 webpack 和 webpack-dev-server：

npm install --save-dev webpack webpack-dev-server

然后，创建两个文件，index.js 和 webpack.config.js，代码如下：

index.js：

const a = 10;
const b = 0;
const c = a / b;
console.log(c);

webpack.config.js：

-- -------------------- ---- -------
----- ------------------ - ----------------------------------------

-------------- - -
  ----- --------------
  ------ -------------
  ------- -
    --------- ------------
  --
  -------- --------------------------
  ---------- -
    -- ----- -----
    ----- -----
  --
  -------- ---- ----------------------
--

运行 webpack-dev-server，并在浏览器中打开 http://localhost:8080，你会看到如下信息：

在代码编辑器中更改错误代码，保存文件并重新加载页面，您会发现错误信息已经更新了！

以上便是 npm 包 error-overlay-webpack-plugin 的使用教程，当然仅仅只是入门文档。针对于这个插件的更加详细的介绍、配置以及其他还有待您的进一步探索。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e2fb81d47349e53da1